filter() 과 parseInt()사용하기

1. 앞서 배운 filter() 를 활용해 코드를 만든다.

  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

여기서 인자로 있는 toDo 는 데이터베이스의 요소 각각을 의미한다.

return문의 의미: 내가 클릭한 li.id 와 다른 id 를 가진 toDo는 남겨두고 싶다

2. 콘솔창에 item이 4개였던 toDos 중 1개를 지우고 다시 toDos를 console.log 해보면 3개로 줄어든 것을 볼 수 있다.

3. 하지만 새로고침하면 그대로 4개.

4. 왜냐하면 toDo 의 id는 number 형.
   하지만 li 의 id는 string 형.
   타입이 다르기 때문에 비교가 불가능한 것.

5. parseInt() 를 통해 문자열을 숫자로 바꿔준다.

6. todo를 지운 후 saveToDos 를 다시 불러주어야 한다.

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
  // JSON.stringify 로 array처럼 생긴 string으로 변환해준다.
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
  // 여기서 인자인 toDo 는 데이터베이스의 요소 중 하나
  // return문의 뜻: 클릭한 li.id와 다른 toDo는 남겨두고 싶다
  saveToDos();
}