为什么删除列表项[Js DOM]时removeChild（）不起作用？

Question

这里是shopping list，您可以在其中添加几个项目名称，它将显示该项目。在删除项目时，它将删除该项目。最后单击该项目，它将标记为已完成。因此，创建该项目并删除该项目可以正常工作，但是单击它们时会出现问题。

问题（在切换多个列表项时发生）

例如，您添加了3个项目（xxx，yyy，zzz），并且在单独单击它们时，它将切换为完整和不完整。但是如果您选择了xxx，则将它们zzz并再次单击zzz，它不起作用。当您单击xxx时，它将标记为不完整。

错误

script.js：91未捕获的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

从QuerySelector（）方法上的MDN：

Document方法querySelector（）返回文档中与指定选择器或选择器组匹配的第一个Element。如果未找到匹配项，则返回null。

所以当你写：

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

您将在DOM上找到与您的搜索匹配的第一个元素。但是，您正在寻找liItem的子元素，其子类为“ completed”。

您想写什么：

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

额外说明：.toggle（“ aClass”）方法在元素不包含类“ aClass”的情况下添加该类，如果已经包含该类，则将其删除。因此，您可以采取以下措施

liItem.classList.toggle("toggle");

如果不是，请继续使用它。

为什么删除列表项[Js DOM]时removeChild（）不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么删除列表项[Js DOM]时removeChild（）不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1