JavaScript removeChild() 方法详解与使用示例
本文详细介绍JavaScript中removeChild()函数的用法，包括其语法结构、参数说明及返回值。重点解析了不同浏览器对空白文本节点的处理差异，并通过两个代码实例演示如何直接删除子元素及过滤后删除。同时对比了jQuery中remove()与empty()方法的区别，帮助开发者掌握DOM节点移除的核心机制。
removeChild() 方法概述
removeChild() 方法用于从父元素中移除指定的子节点。
若删除操作成功，该方法返回被移除的节点对象；若失败，则返回 null。
基本语法如下：
fatherObj.removeChild(childrenObj)
参数说明如下：
1. fatherObj：指包含子元素的父元素对象。 2. childrenObj：指需要从父元素中移除的子元素对象。
跨浏览器兼容性说明：
在Firefox、Chrome以及IE8及以上版本的浏览器中，空白字符会被视为文本节点；而在IE8及更低版本中，空白文本节点通常被忽略。关于获取元素子节点和父节点的详细行为，可参考相关章节。
代码实例演示
代码示例：
示例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>本站</title>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
<li>本站一</li>
<li>本站二</li>
<li>本站三</li>
<li>本站四</li>
</ul>
</body>
</html>上述代码实现了从 id 为 box 的元素中移除第二个 li 子元素的功能。
示例二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>本站</title>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var liArray=[];
var y=0;
var childNodes=obox.childNodes;
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].nodeType==1){
liArray[y]=childNodes[i];
y=y+1;
}
}
obox.removeChild(liArray[1]);
}
</script>
</head>
<body>
<ul id="box">
<li>本站一</li>
<li>本站二</li>
<li>本站三</li>
<li>本站四</li>
</ul>
</body>
</html>上述代码从 box 的所有子节点中筛选出元素节点（nodeType为1），存入数组后，再移除数组中的第二个元素节点。
方法总结与jQuery对比
总结：
removeChild() 方法
该函数通过获取元素的父元素来执行删除操作，标准语法为：parent.removeChild(child);
有时我们需要在不直接持有父元素引用的情况下进行删除。由于DOM机制要求明确父子关系才能执行删除，因此当仅拥有目标元素时，可以通过其 parentNode 属性获取父节点，进而调用 removeChild() 完成删除。
var child=document.getElementById(p1);
child.parentNode.removeChild(child);注意：jQuery 提供了功能相似的 remove() 和 empty() 方法。
remove()：用于移除选中元素本身及其所有子元素。
empty()：仅移除选中元素内的所有子元素，保留选中元素本身。
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战
2026-11-04 10:12:22