javascript - removeChild() 只删除一个 li 元素

Question

这是我的代码:

let span = document.querySelector("span");
let ul = document.querySelector("ul");
let li = document.querySelector("li");

//delete todos
span.addEventListener("click", function(event) {
  li.removeChild(span);
  event.stopPropagation();
});

<div id="container">
  <h1>To-do List</h1>
  <input type="text">
  <ul>
    <li><span>X</span>Item 1</li>
    <li><span>X</span>Item 2</li>
    <li><span>X</span>Item 3</li>
  </ul>
</div>

单击跨度标签时，X 文本应该消失。通过运行我的代码，它仅删除第一个跨度，而不删除其他两个。我尝试切换语句 let li = document.querySelectorAll(“li”) 以查看是否有效，但没有运气。我应该如何继续这项工作？

Answer 1

扩展 Shilly 和 j08691 的评论...

您可以使用 querySelectorAll() 选择所有匹配元素而不是第一个。然后迭代 NodeList 以附加您的监听器。

为了简化“了解父节点”，我喜欢使用parentNode。

let spans = document.querySelectorAll("span");

//delete todos
spans.forEach(function(span){
  span.addEventListener("click", function(event) {
    span.parentNode.removeChild(span);
    event.stopPropagation();
  });
});

<div id="container">
  <h1>To-do List</h1>
  <input type="text">
  <ul>
    <li><span>X</span>Item 1</li>
    <li><span>X</span>Item 2</li>
    <li><span>X</span>Item 3</li>
  </ul>
</div>