[ 에러 Error ] Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

자바스크립트로 ToDoList를 만들던 중에 에러와 싸웠다..

상황

1. input창에 내가 추가하고 싶은 List를 적고 form을 submit 전송
2. ul안에 li가 생성 되고, li안에
   2-1. type은 checkbox인 input
   2-2. input value값을 가져와 span태그로 감싸준다.

( input태그의 checked는 기본이 false 이다. )

3. checkbox인 input을 checked를 시켜주면
   3-1. span태그의 text는 style textdecoration
   3-2. delete 삭제 button이 생성
   
   

먼저 문제인 코드를 보자

문제 코드

const todoForm = document.querySelector(".form_group");
const todoInput = todoForm.querySelector(".todo_input");

const spaceToDo = [];
function todoDelete() {}

function drawingTodo(newToDo) {
  const todoListUI = document.querySelector(".todo");
  const todoList = document.createElement("li");
  const todoCheckBox = document.createElement("input");
  const todoText = document.createElement("span");

  todoListUI.appendChild(todoList);
  todoCheckBox.type = "checkbox";
  todoText.textContent = newToDo.text;
  todoCheckBox.checked = newToDo.checked;

  todoList.appendChild(todoCheckBox);
  todoList.appendChild(todoText);

  function todoChecked(event) {
    const deleteBtn = document.createElement("button");	// 얘가 문제
    deleteBtn.textContent = "삭제할래요 버튼";
    const checkTarget = event.currentTarget.checked;
    event.currentTarget.checked = todoCheckBox.checked

    if (checkTarget) {
      todoText.style.textDecoration = "line-through";
      todoList.appendChild(deleteBtn);
      console.log(e);
    } else {
      todoText.style.textDecoration = "none";
      todoList.removeChild(deleteBtn);	// error
      console.log(e);
    }
  }

  todoCheckBox.addEventListener("click", todoChecked);
}

function todoSubmitHandler(e) {
  e.preventDefault();

  const InputValue = todoInput.value;
  todoInput.value = "";

  const newToDoObj = {
    id: Date.now(),
    text: InputValue,
    checked: false,
  };

  drawingTodo(newToDoObj);
}

todoForm.addEventListener("submit", todoSubmitHandler);

진짜 환장하기 직전..
appendChild는 되는데 왜? removeChild는 안되는 것인가 ? ..

번역 후 코드를 보며 분석을 하고 생각을 해봤다..
자식이 아니다 여기에 꽂혔다..
delete 버튼이 해당하는 자식이 아니다 ..? 위치가 아닌건가 ?..

뭐지 ? 하고 delete버튼이 생성되는 것들을 부모 함수로 옮겨보았다..

코드 수정

function drawingTodo(newToDo) {
  const todoListUI = document.querySelector(".todo");
  const todoList = document.createElement("li");
  const todoCheckBox = document.createElement("input");
  const todoText = document.createElement("span");
  const deleteBtn = document.createElement("button");	// todoChecked()함수 밖으로 빼주었다.

  todoListUI.appendChild(todoList);
  todoCheckBox.type = "checkbox";
  todoText.textContent = newToDo.text;
  todoCheckBox.checked = newToDo.checked;
  deleteBtn.textContent = "삭제할래요 버튼";

  todoList.appendChild(todoCheckBox);
  todoList.appendChild(todoText);

  function todoChecked(event) {
    const checkTarget = event.currentTarget.checked;
    event.currentTarget.checked = todoCheckBox.checked;

    if (checkTarget) {
      todoText.style.textDecoration = "line-through";
      todoList.appendChild(deleteBtn);
    } else {
      todoText.style.textDecoration = "none";
      todoList.removeChild(deleteBtn);
    }
  }

  todoCheckBox.addEventListener("click", todoChecked);
}

잘 작동 되는거 녹화해서 업로드 하려고 했는데 동영상이 안올라가서 너무 짜증난다..
무튼 잘 작동 된다.

에러와 싸워 이긴 기분이라 조금 뿌듯하다.