인프런 커뮤니티 질문&답변

아래코드를 입력했는데, newLi dblclick했을때 삭제처리가 되지 않습니다. 문제가 뭘까요?

const todoInput = document.querySelector("#todo-input");

const createTodo = function () {
  const todoList = document.querySelector("#todo-list"); //List자체를 받아오기
  const newLi = document.createElement("li");
  const newSpan = document.createElement("span");

  /**
   * pseudo: (addEventListner)
   * 할일이 완료가 된지 안된 일인지 알 수가 없음 -> EventListner를 추가
   * 버튼태그와 함께 온클릭 이벤트를 생성
   */

  //02-addEventListner파트: 버튼태그 추가 및 Event속성(onClick 추가)
  const newBtn = document.createElement("button");

  newBtn.addEventListener("click", () => {
    //클릭을 했을 때 어떻게 할지에 대한 내용을 익명 함수로 지정
    newLi.classList.toggle("complete"); //버튼을 눌렀을 때 새로운 클래스를 추가해준다
  });

  //02-addEventListner: 당연히 삭제도 되어야할텐데... (더블클릭 -> 삭제)
  newLi.addEventListener("dblclick", () => {
    newLi.remove();
  });

  newSpan.textContent = todoInput.value;
  newLi.append(newBtn);
  newLi.appendChild(newSpan);
  todoList.appendChild(newLi); //왜 굳이 span태그를 만들고 span 태그를 List에 추가한 건지는 알 수가 없으나.. 나중에 알려주겠지..
  todoInput.value = " ";

  console.log(newLi);
}; //여기까지만 했을때는 기능상 부족한 부분이 상당히 많음

const keyCodeCheck = function () {
  if (window.event.keyCode === 13 && todoInput.value) {
    //만약 키보드값에 대해 enter값이 눌리면 ->
    createTodo();
  }
};