7.2 Deleting To Dos

todo list를 삭제시켜 주는 버튼을 추가할 것이다.

function paintToDo(newToDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newToDo;
  const button = document.createElement("button");
  button.innerText = "❌";
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

<button> tagName의 HTML 요소를 만들어 반환, <button>의 innerTEXT로 ❌ 를 입력, <li>에 appendChild() 시켜준다. append()는 맨 마지막에 위치해 있어야 한다. 삭제할 수 있는 기능은 아직 없지만 버튼이 만들어진 것을 확인했다.

addEventListener()를 사용해서 <button>에 이벤트를 추가, 우선 작성한 코드가 잘 작동하는지 console.log로 확인

function deleteToDo(event) {
  console.log("하하하하하");
}

function paintToDo(newToDo) {

  button.addEventListener("click", deleteToDo); // 

}

console 탭으로 가서 버튼을 누르면 작동하는 것을 확인할 수 있다. 근데 <button>이 클릭 되었다는 건 알지만 어디서 클릭한 건지 알 수가 없고 어떤 <li>를 제거해야 하는지 알지 못한다. 3개의 버튼이 있는데 버튼 3개 다 같은 event를 기다리고 있고, 모두 같은 function을 실행시키고 있다.

function deleteToDo(event) {
  console.log(event);
}

function paintToDo(newToDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newToDo;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

handleToDoSubmit(event) 함수에 인자로 들어간 event는 각 이벤트의 정보를 가지고 있다. submit event에 대한 정보를 가진 것처럼 deleteToDo(event) 함수에 들어간 event, click event에 대한 정보도 있을 것이다. 클릭된 button이 어떤 건지에 대한 단서를 얻기 위해 event를 console.log() 해서 살펴보자

클릭해 보면 차례대로 똑같은 내용이 출력되는 것을 볼 수 있다. 출력된 내용 중 하나를 열어서 path 부분을 확인해 보면 어떤 element에서 클릭이 일어난 건지 보여주고 있다. 클릭은 button에서 시작했고, button은 li에 포함되어 있다. event가 click된 위치를 알려준다는 것을 알 수 있다.

event는 property를 가지는데 console.log(event) 부분에 target를 넣어주고 확인해보면 어떤 button이 클릭되었는지 알려준다.

function deleteToDo(event) {
  console.log(event.target);
}

function paintToDo(newToDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newToDo;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  toDoList.appendChild(li);
  li.appendChild(span);
  li.appendChild(button);
}

그다음 console.dir로 확인해 보면 다 알진 못하지만 많은 내용의 button.property가 있는 것을 볼 수 있다. 그중에 parentNode, parentElement이 있는데 이것이 의미하는 내용은 현재 event.target의 부모 요소를 알려주는 내용이다.

console.dir() 부분에 parentNode 추가한 뒤 다시 확인해 보면 어떤 것이 클릭 되었는지 알 수 있다.

🤔❓❓

이벤트 객체 e

이벤트 객체는 이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보가 담겨있다. 이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 받는다. 위치는 첫 번째로 항상 고정이다.

event.target

event.target은 실제 이벤트가 발생한 node 즉 HTML 요소이며 여기서는 button이 된다. 모든 HTML 요소에는 하나 이상의 property가 있으며 그중 살펴본 parentNode는 클릭된 요소의 부모 요소를 알려주는 property

이제 todo list를 삭제하는 코드를 작성해보자.

function deleteToDo(event) {
  // 현재 event.target의 부모요소를 찾아주는 변수
  const li = event.target.parentNode;
  li.remove();
}

❌ 버튼을 클릭할 때 event.target에 의해서 button의 부모 요소인 li를 찾게 되며 부모 요소인 li를 제거시켜 작성했던 todo list가 삭제되는 것을 볼 수 있다.

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

function deleteToDo(event) {
  // 현재 event.target의 부모요소를 찾아준다
  const li = event.target.parentNode;
  li.remove();
}

// 매개변수로 들어간 newToDo는 상수 newToDo와 관계없다
// todo list가 추가되는 함수
function paintToDo(newToDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newToDo;
  // span의 텍스트는 handleToDoSubmit() 함수에서 온 newToDo 텍스트가 된다.
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  toDoList.appendChild(li);
  li.appendChild(span);
  li.appendChild(button);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  // preventDefault()는 어떤 event의 기본 동작이 발생되지 않도록 막아준다
  // ex: submit event는 새로고침을 하는데 그 기능을 막아준다
  const newTodo = toDoInput.value;
  // toDoInput.value의 값을 저장하는 변수
  toDoInput.value = "";
  // toDoInput.value에 빈 값(””)을 넣어주고 엔터를 누르면 input 창이 비워진다
  paintToDo(newTodo);
  // 변수 newTodo의 입력값을 paintToDo() 함수에 넣어 호출
}

toDoForm.addEventListener("submit", handleToDoSubmit);