在HTML页面的动态交互开发中，经常需要根据用户的操作或者业务逻辑动态删除页面上已经存在的元素，这时候就需要借助DOM操作的相关方法来实现。removeChild是DOM规范中提供的用于删除指定父节点下子节点的标准方法，是处理元素删除场景最常用的手段之一。
removeChild方法基本语法
removeChild方法属于DOM节点的实例方法，调用该方法的主体是要被删除元素的父节点，方法的参数就是要删除的子节点，方法执行成功后会返回被删除的节点。基本语法格式如下：
// 父节点.removeChild(要删除的子节点)
const parentNode = document.getElementById('parent');
const childNode = document.getElementById('child');
const removedNode = parentNode.removeChild(childNode);
console.log('被删除的节点是：', removedNode);
removeChild使用注意事项
1. 必须明确父节点关系
removeChild方法只能删除调用该方法的节点的直接子节点，不能跨层级删除。如果要删除的元素不是当前节点的子节点，调用方法时会直接抛出错误。比如下面的代码就会执行失败：
// 错误示例：child不是parent的直接子节点
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 假设child是parent的孙子节点，下面的调用会报错
parent.removeChild(child);
2. 删除前需确认节点存在
如果要删除的子节点不存在，调用removeChild也会抛出错误，因此在实际开发中，建议先判断节点是否存在再进行删除操作：
const parent = document.getElementById('parent');
const child = document.getElementById('child');
if (parent && child && parent.contains(child)) {
parent.removeChild(child);
} else {
console.log('要删除的节点不存在或者不是父节点的子节点');
}
其他元素删除方式
remove方法
除了removeChild之外，现代浏览器还支持元素节点的remove方法，该方法可以直接删除元素自身，不需要先获取父节点，使用起来更加简洁：
const targetNode = document.getElementById('target');
// 直接删除自身，不需要父节点参与
targetNode.remove();
不过需要注意的是，remove方法的兼容性不如removeChild，在部分旧版本浏览器中可能无法使用，如果项目需要兼容旧浏览器，还是建议使用removeChild方法。
innerHTML清空子元素
如果需要删除某个父节点下的所有子元素，除了遍历子节点逐个调用removeChild之外，也可以直接设置父节点的innerHTML属性为空字符串：
const parent = document.getElementById('parent');
// 清空父节点下的所有子元素
parent.innerHTML = '';
这种方式虽然简单，但是会销毁父节点下所有的子节点和绑定的事件，重新设置innerHTML时也会重新解析HTML内容，性能上不如逐个删除子节点的方式，适合清空整个容器内容的场景使用。
实际使用示例
下面是一个完整的页面示例，实现点击按钮删除对应列表项的功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素删除示例</title>
</head>
<body>
<ul id="list">
<li>列表项1 <button class="del-btn">删除</button></li>
<li>列表项2 <button class="del-btn">删除</button></li>
<li>列表项3 <button class="del-btn">删除</button></li>
</ul>
<script>
// 获取所有删除按钮
const delBtns = document.querySelectorAll('.del-btn');
// 给每个按钮绑定点击事件
delBtns.forEach(btn => {
btn.addEventListener('click', function() {
// 获取当前按钮所在的li元素
const liItem = this.parentElement;
// 获取ul父节点
const list = document.getElementById('list');
// 删除对应的li元素
list.removeChild(liItem);
});
});
</script>
</body>
</html>
在这个示例中，点击每个列表项后面的删除按钮，就会找到按钮所在的<li>父节点，再通过<ul>父节点调用removeChild方法删除对应的列表项，实现了动态删除元素的效果。
HTMLremoveChildDOM操作元素删除修改时间：2026-06-15 10:54:35