JS刪除某個(gè)父元素下的所有子元素
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)文章
性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04微信小程序canvas實(shí)現(xiàn)環(huán)形漸變
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)環(huán)形漸變,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻
這篇文章主要為大家詳細(xì)介紹了小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻,停止上一個(gè)視頻播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯唵螌?shí)例介紹
這篇文章主要介紹了Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯唵螌?shí)例介紹的相關(guān)資料,這里附有實(shí)例代碼幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2016-12-12JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12