删除具有相同ID的特定元素：JavaScript教程
在HTML规范中，文档内所有元素的id属性值应当是唯一的，但实际开发中可能会遇到因代码错误、第三方脚本注入等原因导致出现多个相同id的元素。如果要删除这些具有相同id的特定元素，我们需要先定位到所有目标元素，再执行删除操作。本文将详细介绍实现该需求的方法与注意事项。
核心思路
由于document.getElementById()方法只会返回第一个匹配到的元素，无法直接获取所有相同id的元素，因此我们需要借助其他DOM查询方法，先收集所有目标元素，再逐个删除。常用的方法有两种：
使用
document.querySelectorAll()结合属性选择器匹配所有相同id的元素遍历所有DOM元素，筛选
id属性值匹配的目标元素
方法一：使用querySelectorAll查询删除
document.querySelectorAll()支持CSS选择器语法，我们可以通过[id="目标id值"]的属性选择器匹配所有id为指定值的元素，然后通过循环遍历删除。
代码示例
// 要删除的目标元素id值
const targetId = "duplicateId";
// 获取所有id为targetId的元素，返回NodeList集合
const targetElements = document.querySelectorAll(`[id="${targetId}"]`);
// 遍历集合，逐个删除元素
targetElements.forEach(element => {
// 判断元素是否存在父节点，避免报错
if (element.parentNode) {
element.parentNode.removeChild(element);
}
});
console.log(`已删除所有id为${targetId}的元素`);这种方法的优势是代码简洁，执行效率高，适合大多数场景使用。
方法二：遍历DOM元素筛选删除
如果需要兼容不支持querySelectorAll的旧环境，或者需要更灵活的筛选逻辑，可以遍历页面所有元素，筛选id匹配的元素后删除。
代码示例
// 要删除的目标元素id值
const targetId = "duplicateId";
// 获取页面所有元素
const allElements = document.getElementsByTagName("*");
// 临时存储要删除的元素，避免遍历过程中修改集合导致异常
const elementsToRemove = [];
// 第一轮遍历：收集所有目标元素
for (let i = 0; i < allElements.length; i++) {
if (allElements[i].id === targetId) {
elementsToRemove.push(allElements[i]);
}
}
// 第二轮遍历：执行删除操作
elementsToRemove.forEach(element => {
if (element.parentNode) {
element.parentNode.removeChild(element);
}
});
console.log(`已删除所有id为${targetId}的元素，共删除${elementsToRemove.length}个`);这种方法兼容性更好，但执行效率略低于第一种方法，适合对兼容性要求较高的场景。
注意事项
删除元素前建议先判断元素是否存在父节点，避免操作不存在的节点导致脚本报错。
如果需要在删除前保留元素的某些数据，建议先完成数据提取再执行删除操作。
实际开发中应尽量保证
id的唯一性，避免后续出现类似的DOM操作问题，可在开发阶段通过HTML校验工具检测重复id。如果目标元素是通过动态脚本生成的，建议在元素加载完成后再执行删除操作，比如将代码放在
DOMContentLoaded事件回调中。
完整示例（含触发逻辑）
以下是一个完整的可运行示例，点击按钮后会删除页面中所有id为testId的元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>删除相同ID元素示例</title>
</head>
<body>
<div id="testId">第一个testId元素</div>
<p id="testId">第二个testId元素</p>
<span id="testId">第三个testId元素</span>
<div id="otherId">其他id的元素，不会被删除</div>
<button id="deleteBtn">删除所有testId元素</button>
<script>
document.getElementById("deleteBtn").addEventListener("click", function() {
const targetId = "testId";
const targetElements = document.querySelectorAll(`[id="${targetId}"]`);
targetElements.forEach(element => {
if (element.parentNode) {
element.parentNode.removeChild(element);
}
});
alert("删除完成");
});
</script>
</body>
</html>你可以将上面的代码保存为HTML文件，在浏览器中打开后点击按钮查看效果，也可以访问示例演示页面（https://www.ipipp.com）查看相关效果说明。