Java Script(JS) - ToDoLIst (2)

 

 

ToDo 리스트를 제거하기 위해서는local storage에서 데이터가 없어야하고 그 상태를 저장해야한다.또한 html에서도 지워져야한다.

 

그래서 html의 li를 없애주도록 하자

이벤트 생성

 

먼저 기존에 있던 삭제 버튼에 이벤트 클릭 이벤트 리스너를 만들고
삭제 함수를 만들자.

 

각각의 버튼은 parent Node(상위 노드)가 있다.
그래서 버튼을 삭제할 때는 각각에 대해 상위 노드가 누구인지 알아야 해당 버튼을 지울 수 있다.

콘솔로 parentNode를 찍어보면

버튼을 클릭할 때마다 버튼에 대한 상위 노드가 찍힌다.

---

이제 삭제를 하기 위해 아래와 같이 수정한다.

 

잘 지워진다

 

근데 문제점은 새로고침을 하면 다시 생긴다는 것이다.

 

그래서 filter를 사용하도록 하자

cleanToDos는 삭제한 toDos를 의미하며 filter를 적용해 forEach()처럼 함수를 직접 호출한다.
그리고 기존의 toDos 리스트를 cleanToDos로 대체하는데

원래 toDos는 const였기 때문에 let으로 변경해준다.
그리고 saveToDos()함수로 저장한다.

 

결과

 

 

 

다 지우고 나니 local storage에서 사라졌다.
새로고침해도 다시 나타나지 않는다.