为什么在删除列表项 [Js DOM] 时，removeChild() 不起作用？

Question

这是一个购物清单，您可以在其中添加一些商品名称，它将显示该商品。删除该项目时，它将删除该项目。最后，单击该项目后，它将标记为已完成。因此，创建项目和删除项目工作正常，但单击它们时会出现问题。

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

假设您添加了 3 个项目（xxx、yyy、zzz），单独单击它们时，会将它们切换为完整和不完整。但是 如果您选择了 xxx、它们 zzz，如果您再次单击 zzz，则不会正在工作。而如果点击xxx，则会标记为不完整。

错误

script.js:91 Uncaught DOMException: 无法在“Node”上执行“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";

}

Answer 1

来自MDN上的 QuerySelector() 方法：Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。所以当你写：let spa = document.querySelector(   `${liItem.tagName.toLowerCase()} .completed`   );您将获得 DOM 上与您的搜索匹配的第一个元素。但是您正在寻找 liItem 的子元素，其类别为“completed”。你想写什么：let spa = liItem.querySelector(".completed");额外注意： .toggle("aClass") 方法在元素没有类“aClass”时添加它，如果元素已经有它，则将其删除。因此您可以采取以下措施liItem.classList.toggle("toggle");脱离 if-else 并应用它。