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>