Почему removeChild () не работает при удалении элемента списка [Js DOM]?

Question

Вот список покупок , где вы можете добавить несколько наименований предметов, и он отобразит этот предмет. При удалении элемента он будет удален. И, наконец, при нажатии на элемент, он будет помечен как завершенный. Поэтому создание элемента и его удаление работают нормально, но при их нажатии возникает проблема.

Проблема (возникает при переключении элемента из нескольких списков)

Допустим, Вы добавили 3 элемента (xxx, yyy, zzz), и при индивидуальном щелчке они будут переключаться как полные и неполные. Но если вы выбрали xxx, их zzz и если вы снова нажмете zzz, это не так. работая. Если вы нажмете xxx, он будет помечен как неполный.

Ошибка

script. js: 91 Uncaught DOMException: Не удалось выполнить «removeChild» на «Узле»: удаляемый узел не является дочерним по отношению к этому узлу. на HTMLLIElement.toggleItem

Вот мой код.

let input = document.querySelector("#item-name");
let button = document.querySelector("input[type=button]");
let items = document.querySelector(".items");
let ul = document.createElement("ul");
items.appendChild(ul);

function disableFunction() {
  button.disabled = false;
}

function callfun(event) {
  if (event.keyCode === 13) {
    console.log("Enter is pressed...");
    createList();
  }
}

input.addEventListener("input", disableFunction);
button.addEventListener("click", createList);
input.addEventListener("keypress", callfun);

function createList() {
  createList();
}

function createList() {
  if (input.value.length) {
    let li = document.createElement("li");
    li.className = "item";

    let val = input.value;
    if (val.length > 10) {
      li.appendChild(document.createTextNode(val.slice(0, 7) + "..."));
    } else {
      li.appendChild(document.createTextNode(input.value));
    }

    let btn = document.createElement("button");
    let i = document.createElement("i");
    i.className = "fa fa-trash fa-2x";
    btn.appendChild(i);
    btn.addEventListener("click", deleteItem);

    //   '<i class="fa fa-trash " aria-hidden="true"></i>';
    //i = document.getElementsByTagName(i);
    li.appendChild(btn);
    ul.appendChild(li);
    input.value = "";

    li.addEventListener("click", toggleItem);

    console.log("added...");
  }
}

function deleteItem(e) {
  //   console.log(e, e.target.parentElement.parentElement)
  let item = e.target.parentElement.parentElement;
  item.style.display = "none";
}

function toggleItem(e) {
  //console.log();
  //console.log(e.target.className.includes("toggle"));
  let liItem = e.target;
  console.log(liItem.textContent);
  console.log(liItem.className.includes("toggle"));

  //if item is completed....
  if (!liItem.className.includes("toggle")) {
    liItem.classList.toggle("toggle");

    let span = document.createElement("span");
    span.className = "completed";
    let i = document.createElement("i");
    i.className = "fa fa-check-circle";
    span.appendChild(i);
    liItem.prepend(span);

    // e.target.innerHTML =
    //   '<span><i class="" aria-hidden="true"></i></span>' +
    //   e.target.innerHTML;
  } else {
    liItem.classList.remove("toggle");
    let spa = document.querySelector(
      `${liItem.tagName.toLowerCase()} .completed`
    );
    console.log(
      document.querySelector(`${liItem.tagName.toLowerCase()} .completed`)
    );
    liItem.removeChild(spa);     // *********LINE 91***********
    console.log(liItem);
  }
}

.container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 1em;
}

h1 {
  text-decoration: underline;
  padding: 10px;
  margin: 15px;
}
input[type="text"] {
  border: 0;
  border-bottom: 3px solid #ccc;
  padding: 5px;
  margin: 15px;
}

input[type="button"] {
  display: block;
  width: 12%;
  padding: 10px;
  margin: 15px auto;
}

input[type="text"]:focus {
  outline: none;
}

.items {
  margin: 10px;
}

ul {
  background-color: #ef5777;
  width: 80%;
  margin: 0 auto;
  padding: 0;
}
.item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 5px 0;
  border: 2px solid black;
  font-size: 1.4em;
  overflow: hidden;
}

.toggle {
  background-color: #f53b57;
  text-decoration: wavy;
  justify-content: space-between;
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDo App</title>

    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Shopping List</h1>
      <p>Get it done today</p>

      <input
        type="text"
        name="item-name"
        id="item-name"
        placeholder="Add to the item..."
      />
      <input type="button" value="Add" disabled />

      <div class="items"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Answer 1

С MDN для метода QuerySelector ():

Метод Document querySelector () возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов , Если совпадений не найдено, возвращается ноль.

Поэтому, когда вы пишете:

let spa = document.querySelector(
  `${liItem.tagName.toLowerCase()} .completed`
);

, вы получаете первый элемент в DOM, соответствующий вашему поиску. Но вы ищете дочерний элемент вашего liItem с классом «complete».

Что вы хотите написать:

let spa = liItem.querySelector(".completed");

Extra примечание: метод .toggle ("aClass") добавляет класс "aClass", когда элемент не имеет его, и удаляет его, если он уже есть. Таким образом, вы можете взять следующее

liItem.classList.toggle("toggle");

из if-else и применить его в любом случае.