< To Do List >

Adding ToDos

입력받은 값을 리스트로 만들어보자

//todo.js
function paintToDo(newTodo){
  const newLi = document.createElement("li");
  const newSpan = document.createElement("span"); 
  //todo를 삭제하는 button을 만들기 위해서 li내부에 span을 만든다.
  newLi.appendChild(newSpan);
  newSpan.innerText = newToDo; //span안에 함수의 인자(입력값)을 넣는다.
  toDoList.appendChild(newLi); //리스트에 생성한 li태그를 넣는다.
}
function handleToDoSubmit(event){
  //...
  paintToDo(newToDo);
}

Deleting To Dos

//todo.js
function deleteToDo(event){ //모든 button이 같은 event를 기다리고 있고, 같은 함수를 실행한다. 어떤 button이 클릭 되었는지 알기 위해서 event를 인자로 받는다.
  const li = event.target.parentElement; //event가 가지고 있는 속성인 target으로 어떤 button이 클릭되었는지 알 수 있고, parentElement로 button의 parent를 알 수 있다.
  //parent를 알아야 하는 이유는, li태그 안에 span, button태그가 들어있는데, button 뿐 만 아니라 span까지 다 묶어서 지워야 하기 때문에 부모를 찾아서 지워야 한다.
  li.remove(); //부모 li가 다 지워진다.
}
function paintToDo(newTodo){
  //...
  const newButton = document.createElement("button"); //button 태그 생성
  newButton.innerText="X"; //button안에 X라는 글자를 넣어준다.
  newButton.addEventListener("click", deleteToDo); //버튼이 클릭되면 함수가 실행된다.
  //...
  newLi.appendChild(newButton); //li의 자식으로 넣어준다.
  //...
}