Today I Learned #8

delBtn을 통해 등록된 <li> 삭제하기

오늘은 추가적으로, "❌"모양의 delBtn을 click하면 해당 <li>가 삭제되는 기능을 추가하겠다. 먼저 paintToDo() 내부에서 delBtn.addEventListener("click",deleteToDo)를 통해 click 이벤트 발생시 deleteToDo()가 발생하도록 하고, 동명의 함수를 선언했다.

deleteToDo()

To Do List의 각 항목의 delBtn이 click된 경우 작동하는 deleteToDo()함수는 기존의 To Do List를 갱신하여 click된 해당 객체가 없는 To Do List를 return하여 paintToDo()를 실행해야한다. click된 해당 객체는 event.target을 통해 지정할 수 있으며, console.dir(event.target)을 실행하면, 아래 이미지와 같이 해당 element의 모든 항목을 확인할 수 있다.

console.dir는 HTML의 구조로 출력되는 console.log와 달리 JSON 형태의 트리구조로 인자를 출력합니다. 이 중, parentNode: li를 확인하였다면, event.target.parentNode 가 삭제되어야하는 요소임을 알 수 있습니다.

const btn = event.target;
const li = btn.parentNode;

이처럼 선언해주고, li를 삭제해주면 되는데, delete child MDN를 참고하여, toDoList.removeChild(li);를 함수에 추가해주면, 정상적으로 삭제됨을 알 수 있습니다. 하지만 현재 삭제된 것은 HTML상의 마크업 뿐이고, 데이터는 Local Storage에 그대로 저장되어있기 때문에, 추가 작업을 통해 Local Storage도 갱신해주어야합니다. 그렇지 않은 경우, 새로고침 할 경우 삭제되었던 li가 다시 복원됨을 확인할 수 있습니다.

Array.filter()

Array.filter() <- list에 있는 모든 원소를 실행 후, 그 결과값에 해당하는 array를 return, forEach()와 비슷함

const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== li.id;
})

위와 같이 작성해주면, 기대한 결과는 해당 목록을 제외한 toDos가 return되는 것이었으나, toDos가 그대로 return되었다.

console.log(toDo.id,li.id)를 cleanToDos내부에 추가한 후 결과를 보면, toDo.id는 1이지만 li.id는 "1"임을 확인할 수 있다.

parseInt()

이는 형태의 차이 (1은 숫자, "1"은 문자열) 가 있기 때문에 발생하는 현상으로, !==를 !=로 수정해주거나, li.id를 parseInt(li.id)로 수정해주면 정상적으로 작동한다. 이를 통해 return된 array cleanToDos를 toDos = cleanToDos를 해줌으로서 toDos 또한 수정하게 되었고, (const로 선언된 toDos를 let으로 선언하도록 수정했다) saveToDos()를 통해 수정된 toDos를 Local Storage에 저장해주면, delBtn을 click하여 To Do List의 항목을 삭제하게되고, 갱신된 To Do List가 Local Storage에 반영되어 새로고침하여도 유지됨을 확인했다.