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删除元素内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！