[TIL] Making a To Do LIST - 3

✏️ TIL

localstorageはtodoをクリアして保存します.

htm lセクションから削除します.

📚 Algorithm
1.htmlセクションをクリアするための関数を宣言します.

function deleteToDo(event){
}

2.paintToDo関数のdelBtnにclickイベントをリスニングするリスナーを追加します.

delBtn.addEventListener("click", deleteToDo);

3.イベント実行時に選択したボタンを確認します.
3-1. function deleteToDo関数でevent.targetを生成します.

const btn = event.target;

eventボタンをクリックするだけです.
どのボタンをクリックしたのか分からないので、targetを追加する必要があります.
3-2. 次に、ターゲットをtargetのparentNodeに縮小する.

const li = btn.parentNode;

4.選択したボタンのリストを削除する
4-1. toDoListをインポートし、上に見つかったli(child)を削除します.

toDoList.removeChild(li);

5.todoをきれいにする
5-1. filterを使用してtoDoを削除します.

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

💡 filter
:filter()メソッドは、指定した関数でテストされたすべての要素を新しい配列に収集します.
5-2. フィルタする関数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は安全にidtoDosを削除しましたが、toDosではありませんので、toDosを置き換えます.

toDos = cleanToDos;

5-5. 次に、置換したtodosを保存します.

saveToDos();