欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS刪除某個(gè)父元素下的所有子元素

 更新時(shí)間:2022年09月16日 09:20:16   作者:CNBLOG  
JS中如何刪除某個(gè)父元素下的所有子元素?這里我介紹幾種方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

JS中如何刪除某個(gè)父元素下的所有子元素?這里我介紹幾種方法:

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() 的用法是先找到父級(jí)元素parent,然后調(diào)用 parent.removeChild(thisNode) 來刪除當(dāng)前子節(jié)點(diǎn)(thisNode),那我們只要循環(huán)遍歷刪除所有的即可。

  舉例說明:

<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 標(biāo)簽
    var div = document.getElementById("dv");
    // 獲取 div 標(biāo)簽下的所有子節(jié)點(diǎn)
    var pObjs = div.childNodes;
    for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序,正序是刪不干凈的,可自行嘗試
      div.removeChild(pObjs[i]);
    }
  }
</script>

注意:循環(huán)遍歷的時(shí)候一定要倒序,因?yàn)檎虻臅r(shí)候,當(dāng)你把索引為0的子節(jié)點(diǎn)刪除后,那么原來索引為1的就變成了0,而這時(shí)變量 i 已經(jīng)變成1了,程序繼續(xù)走時(shí)就會(huì)刪除原先索引為2的現(xiàn)在為1的節(jié)點(diǎn),結(jié)果就是最后只刪除了一半的節(jié)點(diǎn),朋友們可自行嘗試?yán)斫庖幌隆?/p>

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>

到此這篇關(guān)于JS刪除某個(gè)父元素下的所有子元素的文章就介紹到這了,更多相關(guān)JS刪除元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論