✏️ TIL

1. local storage 에서 to do 하나를 지우고 저장한다.
2. htm l파트에서도 지운다.

📚 Algorithm

1. html 파트를 지우기 위한 함수를 선언한다.

function deleteToDo(event){
}

2. paintToDo 함수의 delBtn에 click이벤트를 감지하는 리스너를 추가한다.

delBtn.addEventListener("click", deleteToDo);

3. event가 실행될 때 어떤 버튼이 선택되었는지 확인할 수 있도록 한다.

3-1. function deleteToDo 함수에 event.target을 생성한다.

const btn = event.target;

event만 실행된다면 버튼이 클릭된 것은 확인할 수 있지만,
어떤 버튼을 클릭했는 지 모르기 때문에 target를 추가해야한다.

3-2. 그리고 target의 parentNode로 타겟을 좁힌다.

const li = btn.parentNode;

4. 선택된 버튼의 list를 삭제한다

4-1. toDoList를 가져와서 위에서 찾은 li (child)를 삭제한다.

toDoList.removeChild(li);

5. toDo를 깨끗하게 만든다

5-1. toDo를 삭제하기 위해 filter을 사용한다.

const cleanToDos = toDos.filter();
	// (function)의 테스트를 통과하는 모든 toDos요소들을 모아 cleanToDos 배열로 반환

💡 filter
: filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

5-2. 필터링을 할 function filterFn 함수를 생성하고 ('li'에 없는 id인 toDos) = (html li에서 지워진 toDos)를 체크하도록 한다.

function filterFn(toDo){
  const cleanToDos = toDos.filter(function(todo){
    return toDo.id !== li.id; 
    // toDos(전체 요소)가 'li'의 id와 같지 않을 때 배열을 생성하라
}

이렇게 하면 toDo.id는 number, li.id는 string이라 cleanToDos 배열의 생성이 제대로 이루어지지 않는다.

return toDo.id !== parseInt(li.id);

그렇기 때문에 parseInt를 사용해 li.id를 JSON으로 교체해준다.

5-4. cleanToDos에서는 id가 무사히 삭제되었지만 toDos에서는 아니므로 toDos를 교체한다.

toDos = cleanToDos;

5-5. 그리고 교체한 toDos를 저장한다.

saveToDos();