JavaScript #24

210805
JavaScript #24

---

다음 문제는 삭제를 해도 local Storage에서는 삭제가 되지 않아 내용이 그대로 남아있다는 것이다.

지금의 코드에서는 toDo array는 지워졌지만 local storage에서는 남아있다.

local storage에서 삭제를 위해서는 버튼을 클릭한 요소가 어떤것인지 알아야한다.(무엇을 지워야하는지)

• 각 text에 id를 주자

id는 Date.now()를 이용한다. 매 다른 수가 나오기 때문

function handleToDoSubmit(event) {
  event.preventDefault()
  console.log(toDoInput.value)
  const newTodo = toDoInput.value // 값을 복사
  toDoInput.value = '' // 엔터를 치고 값을 비운다.
  toDos.push(newTodo) // toDos에 push
  paintToDo(newTodo) // todo를 화면에 보여주는 함수
  saveToDos() // todo 저장하는 함수 호출
}

여기서 toDos.push(newTodo)로 매번 적어둔 text를 push하는데 이제 text가 아닌 object를 push 해보자

function handleToDoSubmit(event) {
  event.preventDefault()
  console.log(toDoInput.value)
  const newTodo = toDoInput.value // 값을 복사
  toDoInput.value = '' // 엔터를 치고 값을 비운다.
  const newTodoObj = {
    text: newTodo,
    id: Date.now(),
  }
  toDos.push(newTodoObj) // toDos에 push
  paintToDo(newTodo) // todo를 화면에 보여주는 함수
  saveToDos() // todo 저장하는 함수 호출
}

새로운 object를 만들고 text와 id를 넣는다. 그리고 이 object를 toDos에 push한다.

이렇게 object가 local storage에 저장된 것을 볼 수 있다.

-paintToDo 수정

function paintToDo(newTodo) {
  const li = document.createElement('li')
  const span = document.createElement('span')
  span.innerText = newTodo.text
  const button = document.createElement('button')
  button.innerText = '❌'
  button.addEventListener('click', deleteToDO)
  li.appendChild(span)
  li.appendChild(button)
  toDoList.appendChild(li)
}

function handleToDoSubmit(event) {
  event.preventDefault()
  console.log(toDoInput.value)
  const newTodo = toDoInput.value // 값을 복사
  toDoInput.value = '' // 엔터를 치고 값을 비운다.
  const newTodoObj = {
    text: newTodo,
    id: Date.now(),
  }
  toDos.push(newTodoObj) // toDos에 push
  paintToDo(newTodoObj) // todo를 화면에 보여주는 함수
  saveToDos() // todo 저장하는 함수 호출
}

paintToDo에 newTodoObj로 text가 아닌 object를 전달하여 id와 text모두를 보냈기 때문에 paintTodo에서는 화면에 text가 보여져야한다. 따라서 span.innerText에는 전달된 object인 newTodo.text를 넣어준다.

const li = document.createElement('li')
li.id = newTodo.id

li의 id또한 적용되도록 한다.

이제 삭제를 위해 어떤 id를 삭제할지 알려줘야한다.

function deleteToDO(event) {
  // todo 삭제 함수
  const li = event.target.parentElement
  console.log(li.id)
  li.remove()
}

삭제하기 전 li의 id를 출력하도록 하면 해당 id를 보여준다.

이 id를 사용해서 array에서 item을 지우면 된다.

참고
https://nomadcoders.co/javascript-for-beginners