nomadcoders - deleting todos

todo.js

function deleteToDo (event) {
    const li = event.target.parentElement
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id))
    li.remove()
    saveToDos()
}

function paintToDo(newToDo) {
    const li = document.createElement("li")
    **li.id = newToDo.id**
    const span = document.createElement("span")
    const button = document.createElement("button")
    button.innerText = "X"
    button.addEventListener("click", deleteToDo)
    li.appendChild(span)
    li.appendChild(button)
    span.innerText = newToDo.text
    toDoList.appendChild(li)
}

function handleToDoSubmit (event) {
    event.preventDefault()
    const newToDo = toDoInput.value
    toDoInput.value = ""
    **const newToDoObj = {
        text : newToDo,
        id: Date.now()
    }
    toDos.push(newToDoObj)
    paintToDo(newToDoObj)**
    saveToDos()
}

항목 구분을 위해 newToDo를 객체 형식으로 만들고 id를 부여한다. id는 랜덤한 숫자를 부여하기 위해 Date.now()를 사용한다. li구분을 위해 li에 newToDo.id를 부여한다. 기존에 선언한 deleteToDo에 .filter()를 사용하여 선택된 아이디 외 다른 객체를 반환한다. filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

실행화면


"a" 항목이 localstorage에서 완전히 지워진 상태를 확인할 수 있다.