如何移除页面中除一个外所有相同ID的元素？

先插个小提醒：按照HTML的官方规范，页面中每个元素的ID必须是唯一的，重复ID属于不规范写法，可能会导致getElementById()这类API只返回第一个匹配元素，甚至引发其他意想不到的问题。不过既然你遇到了这种场景，咱们来看看怎么用for循环解决。

实现思路与代码示例 #

核心步骤很简单：先获取所有重复ID的元素，再通过for循环遍历并删除除目标元素外的所有节点。

因为getElementById()只会返回第一个匹配的元素，所以我们得用querySelectorAll()来拿到所有相同ID的元素集合。然后根据你想保留的位置（第一个、最后一个或者任意一个），调整循环的逻辑：

// 替换成你实际要处理的ID
const targetId = 'your-duplicate-id';
// 获取所有具有该ID的元素
const duplicates = document.querySelectorAll(`#${targetId}`);

// 示例1：保留第一个元素，删除其余
for (let i = 1; i < duplicates.length; i++) {
  duplicates[i].remove();
}

// 示例2：如果想保留最后一个元素，删除前面的所有
// for (let i = 0; i < duplicates.length - 1; i++) {
//   duplicates[i].remove();
// }

为什么这个方法可行？ #

querySelectorAll()返回的是一个静态的NodeList集合，遍历的时候即使删除元素，也不会影响集合的长度（因为它是创建时的快照），所以不用担心循环过程中出现索引混乱的问题。

如果你的场景是动态生成的元素，也可以在元素添加到DOM后再执行这段代码，确保能捕获到所有重复节点。

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