[JS] 008. Making a To Do List(3)


  • ローカルストレージから削除するもhtmlから
  • を削除する.
    function deleteTodos(event){
        console.log(event.target.parentNode);
    }
    
    function savetodos(){
        localStorage.setItem(TODOS_LS,JSON.stringify(loadedtodos));
    }
    
    function painttodo(text){
        const li=document.createElement("li"); //생성해준다
        const delbtn = document.createElement("Button");
        delbtn.innerText="❌";
        delbtn.addEventListener("click", deleteTodos)
        const span = document.createElement("span");
        const newid = loadedtodos.length+1;
        span.innerText = text
        li.appendChild(span);
        li.id=newid;
        li.appendChild(delbtn);
        toDoList.appendChild(li);
        const loadedtodoobj={
            text : text,
            id : newid
        };
        loadedtodos.push(loadedtodoobj);
        savetodos();
    }
    ===>クリーンアップボタンの下にイベントを追加します.
    deleetetodosという関数を作成し、クリアボタンを押すと、今どのボタンを押しているかのIDを教えてあげる必要があります.
    =>
    (ボタンを押すと、どのIDのボタンを押すかを示す)
    function deleteTodos(event){
        const btn = event.target;
        const li = btn.parentNode;
        toDoList.removeChild(li);
        const cleantodos = loadedtodos.filter(function(todod){
            return todod.id !==parseInt(li.id);
            });
        loadedtodos=cleantodos
        savetodos();
    }
  • filter:リスト内のすべての項目に対して関数を実行
    また、関数に合致する子供たちだけがリストに載っています.