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了,程序繼續走時就會刪除原先索引為2的現在為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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM