자바스크립트 TODOLIST 만들기 + 삭제

    <form id="todo-form">
        <input type="text" placeholder="입력하세요" />
    </form>
    <ul id="todo-list">
    </ul>

 

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

function deleteToDo(event){
    const li = event.target.parentElement; //클릭된 element의 부모 여기선 li를 가리킴.
    li.remove();
}

function paintTodo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "X" ;
    button.addEventListener("click",deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function hadleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value= "";
    paintTodo(newTodo);
}

toDoForm.addEventListener("submit",hadleToDoSubmit);