#7.2 Deleting To Dos

1. JS에서 html 내부에 button 태그 만들기

1) const button = document.createElement("button");
// html에 button 태그를 생성할 수 있도록 button이라는 객체 정의

2) button.innerText = "❌";
// 사용자가 버튼을 누르면 텍스트가 삭제되는 기능이 있다는 것을 인식시키기 위해 버튼 내부 텍스트를 "❌"로 정의 (윈도우 기준: window 키 + . )

3) button.addEventListener("click", deleteToDo);
// 버튼에서 이벤트가 발생했을 때 삭제 기능을 담당하는 함수가 실행되도록 한다. 여기에선 "click"이 발생 시, deleteToDo함수가 실생되도록 함

2. 삭제 기능을 담당하는 함수 생성

1) const li = event.target.parentElement;
// 이벤트가 발생했들때.해당객체를지정하여.그것의부모태그를지정;
//console.log(event), console.log(event.target)을 통해서 parentElement를 찾아가는 과정을 알 수 있었다.

2) li.remove();
// 위에서 지정된 것을 삭제;

3. 정리하면

1) button.addEventListener("click", deleteToDo); 에서 클릭이 발생하면 deleteToDo함수가 실행된다.

2) function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}