在前端开发中，我们经常需要根据业务逻辑动态删除页面上的DOM元素，比如删除列表项、关闭弹窗、移除失效的广告模块等，js提供了多种原生方法来实现DOM节点的移除操作，不同方法的使用场景和特性有所区别，下面逐一介绍。
removeChild方法
removeChild是最早出现的DOM节点移除方法，属于父节点的方法，需要由要移除节点的父节点调用，参数是要移除的子节点，调用成功后会返回被移除的节点。
基本使用
假设页面上有如下HTML结构：
<div id="parent"> <p id="child1">第一个子节点</p> <p id="child2">第二个子节点</p> </div>
如果要移除id为child1的节点，代码如下：
// 获取父节点
const parent = document.getElementById('parent');
// 获取要移除的子节点
const child1 = document.getElementById('child1');
// 调用removeChild移除节点
const removedNode = parent.removeChild(child1);
console.log(removedNode); // 输出被移除的p#child1节点
注意事项
- 如果传入的节点不是调用方法的父节点的子节点，会直接抛出错误，因此使用前需要确认父子关系。
- 移除后节点只是从DOM树中脱离，节点本身仍然存在，还可以被后续逻辑复用。
remove方法
remove是ES6之后新增的DOM节点方法，属于节点自身的方法，调用后会直接将该节点从DOM树中移除，不需要依赖父节点，使用起来更简洁。
基本使用
还是以上面的HTML结构为例，移除id为child2的节点：
// 直接获取要移除的节点
const child2 = document.getElementById('child2');
// 调用remove方法移除自身
child2.remove();
注意事项
- 该方法没有返回值，调用后节点直接从DOM树移除。
- 兼容性方面，IE浏览器完全不支持该方法，如果需要兼容IE，不建议使用这个方法。
removeNode方法
removeNode是IE浏览器特有的私有方法，其他现代浏览器不支持，使用场景较少，如果需要兼容老版本IE可以考虑使用。
基本使用
const child1 = document.getElementById('child1');
// 参数true表示是否同时移除所有子节点，默认是false
child1.removeNode(false);
不同方法对比
三种方法的特性对比如下：
| 方法名 | 所属对象 | 返回值 | 兼容性 |
|---|---|---|---|
| removeChild | 父节点 | 返回被移除的节点 | 所有浏览器都支持 |
| remove | 节点自身 | 无返回值 | 现代浏览器支持，IE不支持 |
| removeNode | 节点自身 | 返回被移除的节点 | 仅IE支持 |
常见使用误区
- 误以为移除节点后内存会自动释放：如果移除的节点还被其他变量引用，那么该节点不会被垃圾回收，需要手动解除引用。
- 移除不存在的节点：如果获取节点时返回null，直接调用移除方法会报错，建议先判断节点是否存在再操作。
实际场景示例
比如实现一个可删除的列表，点击列表项后的删除按钮就移除对应的列表项：
<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>
// 获取所有删除按钮
const delBtns = document.querySelectorAll('.del-btn');
// 遍历按钮绑定点击事件
delBtns.forEach(btn => {
btn.addEventListener('click', function() {
// 获取当前按钮所在的li节点
const liNode = this.parentNode;
// 移除该li节点，使用removeChild兼容更多浏览器
liNode.parentNode.removeChild(liNode);
});
});
jsremoveChildremoveremoveNodeDOM操作修改时间：2026-07-19 19:15:26