JavaScript 删除父元素下所有子元素的三种方法
本文介绍在 JavaScript 中清空父元素所有子节点的三种常用方法。第一种利用 innerHTML 属性直接置空，简洁高效；第二种通过 removeChild 方法结合倒序遍历确保删除完整，避免索引错乱；第三种使用 jQuery 的 empty() 方法简化代码。文章包含具体代码示例及注意事项，帮助开发者根据场景选择合适方案。
在 JavaScript 开发中，如何高效地移除指定父元素下的所有子节点？本文将介绍几种常用的实现方案。
方法一：利用 innerHTML 属性
这种方法通常被认为是最便捷的。只需定位到目标父元素，将其 innerHTML 属性设置为空字符串即可实现清空。
具体示例如下：
<input type="button" value="按钮" id="btn">
<div id="dv">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerHTML = "";
}
</script>方法二：使用 removeChild() 方法
removeChild() 函数的基本用法是先获取父级元素，再调用 parent.removeChild(thisNode) 来移除特定的子节点。若要删除所有子节点，则需要配合循环遍历逐一执行删除操作。
具体示例如下：
<input type="button" value="按钮" id="btn">
<div id="dv">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
// 获取 div 标签
var div = document.getElementById("dv");
// 获取 div 标签下的所有子节点
var pObjs = div.childNodes;
for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试
div.removeChild(pObjs[i]);
}
}
</script>注意：循环遍历的时候一定要倒序，因为正序的时候，当你把索引为0的子节点删除后，那么原来索引为1的就变成了0，而这时变量 i 已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，结果就是最后只删除了一半的节点，朋友们可自行尝试理解一下。
方法三：使用 jQuery 的 empty() 方法
语法格式如下：
$(selector).empty()
具体示例如下：
<input type="button" value="按钮" id="btn">
<div id="dv">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$("#btn").click(function () {
$("#dv").empty();
})
</script>以上就是关于在 JavaScript 中删除父元素下所有子元素的几种实现方式。如需了解更多相关技术内容，欢迎查阅本站往期文章或继续浏览后续教程，感谢大家的支持！
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27