应使用 element.remove() 而非 removechild,因后者需父节点引用、易抛 notfounderror、不支持未挂载节点且无法链式调用;remove() 更安全简洁,主流浏览器均支持,兼容 ie 需回退 parentnode.removechild 并注意内存泄漏。

removeChild 已被现代开发弃用,直接调用 element.remove() 更安全、简洁,且无需父节点引用。
为什么不要用 removeChild?
它要求你先拿到父节点,再传入子节点,多一步操作,容易出错:
- 如果父节点是
null或不是目标元素的直属父级,会抛出NotFoundError - 必须确保传入的是「当前 DOM 树中真实存在的子节点」,动态创建未挂载的节点调用会失败
- 无法链式调用,写法冗长:
parent.removeChild(child)
element.remove() 怎么用?
所有主流浏览器(包括 Edge 17+、Chrome 27+、Firefox 23+)都支持,直接在目标元素上调用即可:
const btn = document.querySelector('#delete-btn');
btn.remove(); // ✅ 一行搞定,不依赖父节点
适用场景包括:
- 点击按钮删除自身:
this.remove()(放在事件回调里) - 批量移除:
document.querySelectorAll('.item').forEach(el => el.remove()) - 配合条件判断:
if (el.dataset.status === 'archived') el.remove()
兼容老版本 IE 的话怎么办?
IE 11 及以下不支持 remove(),但也不支持 removeChild 的现代用法(比如对 DocumentFragment 调用)。真要兼容,得回退到传统方式:
if (el.parentNode) {
el.parentNode.removeChild(el);
}
注意两点:
- 必须加
el.parentNode判断,否则移除已脱离 DOM 的元素会报错 - 别用
el.parentElement替代 ——parentElement对于某些节点(如文本节点)可能为null,而parentNode更可靠
真正麻烦的不是语法,而是移除前没清理事件监听器或数据引用,导致内存泄漏。删元素时顺手调用 el.removeEventListener 或清空 el._customData 才算完整。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











