API 연동 - 데이터 삭제하기

삭제 버튼을 누르면 데이터가 삭제되게금 작성을 해보도록 하겠습니다.

1-1 removeTodo이벤트 연결

  const init = () => {
    window.addEventListener('DOMContentLoaded', () => {
      getTodos()
    })
    $form.addEventListener('submit', addTodo)
    $todos.addEventListener('click', toggleTodo)
    $todos.addEventListener('click', changeEditMode)
    $todos.addEventListener('click', editTodo)
    $todos.addEventListener('click', removeTodo)
  }
  init()

1-2 removeTodo이벤트

  const removeTodo = (e) => {
    if (e.target.className !== 'todo_remove_button') return
    const $item = e.target.closest('.item')
    const id = $item.dataset.id

    fetch(`${API_URL}/${id}`, {
      method: 'DELETE'
    }).then(getTodos).catch(error => console.error(error.message))
  }