[JavaScript] Momentum App - 4.1 ToDo-List Deleting To Dos

// 삭제 버튼 만들기

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event){
    //target은 눌린 button - 부모 요소는 li -> 삭제 대상
    const li = event.target.parentElement; 
    li.remove(); // 삭제
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    // span에 텍스트 값 넣기 
    span.innerText = newTodo;
    
    const button = document.createElement("button");  
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);

    // li 안에 span, button 넣기
    li.appendChild(span); //append = 끝에 들어감
    li.appendChild(button);

    // HTML에 li 추가
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault(); // window 기본동작(페이지 새로고침) 막기
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);