如何使用EventListener移除被点击的li元素？

你现在的问题出在document.querySelector('.item')——这个方法每次都会选中页面上第一个带item类的<li>，所以不管你点哪个位置，删掉的都是第一个元素。要实现点击哪个删哪个，得利用事件对象里的目标元素：

修改后的JS代码如下：

document.querySelector("ol").addEventListener('click', whenClick);

function whenClick(event) {
  // 找到被点击的那个带item类的li元素
  const clickedLi = event.target.closest('.item');
  // 确认找到的元素存在，再执行移除
  if (clickedLi) {
    clickedLi.remove();
  }
}

代码说明： #

• event.target：指触发点击事件的最底层元素（比如你点的是li里的文字，target就是对应的li元素）
• closest('.item')：向上查找最近的带有item类的元素，能避免li内部有子元素时导致的目标不准确问题
• 加if (clickedLi)判断是为了防止点击ol空白区域时出现报错

这样修改后，点击哪个<li>就会移除哪个，完全不用改动HTML代码。

内容的提问来源于stack exchange，提问作者Lukas E