JS刪除某個父元素下的所有子元素

更新時間：2022年09月16日 09:20:16 作者：CNBLOG

JS中如何刪除某個父元素下的所有子元素？這里我介紹幾種方法,結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

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，然后調(diào)用 parent.removeChild(thisNode) 來刪除當(dāng)前子節(jié)點（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é)點
    var pObjs = div.childNodes;
    for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序，正序是刪不干凈的，可自行嘗試
      div.removeChild(pObjs[i]);
    }
  }
</script>

注意：循環(huán)遍歷的時候一定要倒序，因為正序的時候，當(dāng)你把索引為0的子節(jié)點刪除后，那么原來索引為1的就變成了0，而這時變量 i 已經(jīng)變成1了，程序繼續(xù)走時就會刪除原先索引為２的現(xiàn)在為1的節(jié)點，結(jié)果就是最后只刪除了一半的節(jié)點，朋友們可自行嘗試?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刪除某個父元素下的所有子元素的文章就介紹到這了,更多相關(guān)JS刪除元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
微信小程序canvas實現(xiàn)環(huán)形漸變
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實現(xiàn)環(huán)形漸變，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
如何寫出一個驚艷面試官的JavaScript深拷貝
淺拷貝是面試中經(jīng)常會被問到的問題,這篇文章主要給大家介紹了關(guān)于如何寫出一個驚艷面試官的JavaScript深拷貝的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
layui對工具條進(jìn)行選擇性的顯示方法
今天小編就為大家分享一篇layui對工具條進(jìn)行選擇性的顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
一篇文章弄懂js中的typeof用法
這篇文章主要給大家介紹了關(guān)于js中typeof用法的相關(guān)資料,typeof運(yùn)算符把類型信息當(dāng)作字符串返回,包括有大家常有變量類型,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
小程序點擊圖片實現(xiàn)自動播放視頻
這篇文章主要為大家詳細(xì)介紹了小程序點擊圖片實現(xiàn)自動播放視頻，停止上一個視頻播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
微信小程序模版渲染詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序模版渲染的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-01-01
Javascript oop設(shè)計模式面向?qū)ο缶幊毯唵螌嵗榻B
這篇文章主要介紹了Javascript oop設(shè)計模式面向?qū)ο缶幊毯唵螌嵗榻B的相關(guān)資料,這里附有實例代碼幫助大家學(xué)習(xí)理解，需要的朋友可以參考下
2016-12-12
threejs后期處理的基本使用方法之加特效
這篇文章主要給大家介紹了關(guān)于threejs后期處理的基本使用方法之加特效的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-01-01
JS中使用new Date(str)創(chuàng)建時間對象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時間對象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下
2016-12-12