JS删除某个父元素下的所有子元素

更新时间：2022年09月16日 09:20:16 作者：CNBLOG

JS中如何删除某个父元素下的所有子元素？这里我介绍几种方法,结合实例代码给大家介绍的非常详细，需要的朋友可以参考下

JS中如何删除某个父元素下的所有子元素？这里我介绍几种方法：

1.通过元素的 innerHTML 属性来删除

　　这种方式我觉得是最有方便的，直接找到你想要的父元素，直接令其 element.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>

2.通过 removeChild() 方法来删除

　　removeChild() 的用法是先找到父级元素parent，然后调用 parent.removeChild(thisNode) 来删除当前子节点（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的节点，结果就是最后只删除了一半的节点，朋友们可自行尝试理解一下。

3.通过 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>

到此这篇关于JS删除某个父元素下的所有子元素的文章就介绍到这了,更多相关JS删除元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

性能优化篇之Webpack构建代码质量压缩的建议
这篇文章主要介绍了性能优化篇之Webpack构建代码质量压缩的建议，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
微信小程序canvas实现环形渐变
这篇文章主要为大家详细介绍了微信小程序canvas实现环形渐变，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
如何写出一个惊艳面试官的JavaScript深拷贝
浅拷贝是面试中经常会被问到的问题,这篇文章主要给大家介绍了关于如何写出一个惊艳面试官的JavaScript深拷贝的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
layui对工具条进行选择性的显示方法
今天小编就为大家分享一篇layui对工具条进行选择性的显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
一篇文章弄懂js中的typeof用法
这篇文章主要给大家介绍了关于js中typeof用法的相关资料,typeof运算符把类型信息当作字符串返回,包括有大家常有变量类型,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-11-11
小程序点击图片实现自动播放视频
这篇文章主要为大家详细介绍了小程序点击图片实现自动播放视频，停止上一个视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
微信小程序模版渲染详解
这篇文章主要为大家详细介绍了微信小程序模版渲染的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
Javascript oop设计模式面向对象编程简单实例介绍
这篇文章主要介绍了Javascript oop设计模式面向对象编程简单实例介绍的相关资料,这里附有实例代码帮助大家学习理解，需要的朋友可以参考下
2016-12-12
threejs后期处理的基本使用方法之加特效
这篇文章主要给大家介绍了关于threejs后期处理的基本使用方法之加特效的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-01-01
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
这篇文章主要介绍了JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法的相关资料,需要的朋友可以参考下
2016-12-12