JavaScript如何实现点击元素时同步删除DOM中两个相同id的元素

问题根源 #

HTML 规范要求 ID 必须全局唯一，你当前页面存在重复ID，所以querySelector只会返回第一个匹配元素，getElementById也只会返回首个匹配结果，这是原生API的既定逻辑。

解决方案 #

我们可以使用属性选择器绕过ID唯一限制，匹配所有ID值相同的元素，统一删除对应的父级li节点，修改后的JS代码如下：

document.addEventListener("DOMContentLoaded", () => { 
  // 绑定到最外层的content容器，适配插件动态生成的元素
  document.querySelector(".content").addEventListener("click", getItem) 
}) 

function getItem(e) { 
  // 只响应可见绿色元素的点击
  let visibleLi = e.target.closest(".visible")
  if (!visibleLi) return

  const targetId = e.target.id
  // 用属性选择器匹配所有id等于targetId的span元素
  const allMatchSpans = document.querySelectorAll(`span[id="${targetId}"]`)
  
  // 遍历所有匹配的span，删除它们的父级li
  allMatchSpans.forEach(span => {
    const parentLi = span.closest("li")
    parentLi && parentLi.remove()
  })
}

代码说明 #

• 事件绑定改到外层.content容器，不管插件后续怎么动态生成#container内的元素，事件委托都能生效
• 用span[id="xxx"]属性选择器可以无视ID唯一限制，拿到所有同ID的span元素
• 遍历所有匹配元素统一删除父级li，无需单独区分紫色（hidden类）和绿色（visible类）元素

最佳实践建议 #

如果可以调整插件生成规则，建议将标识属性从id改为自定义data属性，比如给span设置data-id="1"，取值时用e.target.dataset.id，完全符合HTML规范，也不会出现重复ID的潜在问题。

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