바닐라 JS로 크롬 앱 만들기 [6-3] Delete ToDos

---

• 목표 : 작성한 투두리스트 삭제
• append는 항상 마지막에 작성

HTML

<ul id="todo-list"></ul>
<li>
<span>text</span>
<button>x</button>
</li>

button이 클릭 이벤트를 기다리고 있어야 함

---

삭제 기능이 없는 리스트

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

투두리스트가 append 되기 전에 삭제 버튼을 만들어야 함

---

삭제 버튼 추가

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);

삭제 버튼은 있지만 기능이 없고, 어떤 삭제 버튼을 눌렀는지 알 수 없음

---

어떤 ❌ 버튼을 눌렀는지 찾는 방법

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

• composedPath를 사용하면 x 버튼의 위치를 찾을 수 있다.

결과 :

---

1. (7) [button, li, ul#todo-list, body, html, document, Window]
   1. 0: button
   2. 1: li
   3. 2: ul#todo-list
   4. 3: body
   5. 4: html
   6. 5: document
   7. 6: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
   8. length: 7
   9. [[Prototype]]: Array(0)

---

function deleteToDo(event) {
    console.dir(event.target.parentElement);
}

클릭한 버튼의 li 확인 가능

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

클릭한 버튼의 부모의 innerText 확인 가능

---

위 방법을 활용한 삭제 기능 추가

function deleteToDo(event) {
    const li = event.target.parentElement;
    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 = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

• ❌ 버튼을 클릭한 것이 인식 되면 deleteToDo 실행
• 해당 버튼의 li를 삭제