Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法
下面給大家介紹Javascript removeChild()刪除節(jié)點(diǎn)的方法,具體詳情如下所示:
在Javascript中,只提供了一種刪除節(jié)點(diǎn)的方法:removeChild()。
removeChild() 方法用來刪除父節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)。
語法:
parent.removeChild(thisNode)
參數(shù)說明:
參數(shù) | 說明 |
---|---|
thisNode | 當(dāng)前節(jié)點(diǎn),即要?jiǎng)h除的節(jié)點(diǎn) |
parent | 當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn),即 thisNode.parentNode |
例如,刪除 id="demo" 的節(jié)點(diǎn)的語句為:
var thisNode=document.getElementById("demo"); thisNode.parentNode.removeNode(thisNode);
舉例,刪除節(jié)點(diǎn):
<div id="demo"> <div id="thisNode">點(diǎn)擊刪除我</div> </div> <script type="text/javascript"> document.getElementById("thisNode").onclick=function(){ this.parentNode.removeChild(this); } </script>
實(shí)例演示:
可以看出來,雖然Javascript只提供了一種刪除節(jié)點(diǎn)的方法,但是足夠用了。
ps:JavaScript刪除子節(jié)點(diǎn)的方法
HTML代碼如下:
<div id="f"> <div>a</div> <div>b</div> <div>c</div> </div>
如果想刪除f節(jié)點(diǎn)下的所有子節(jié)點(diǎn),很自然也很正常想到的方法應(yīng)該就是下面的這段代碼了:
var f = document.getElementById("f"); var childs = f.childNodes; for(var i = 0; i < childs.length; i++) { alert(childs[i].nodeName); f.removeChild(childs[i]); }
當(dāng)程序運(yùn)行后我們發(fā)現(xiàn)無論在FireFox還是在IE下,均不能完全的刪除所有的子節(jié)點(diǎn)(FireFox中把空白區(qū)域也
當(dāng)成節(jié)點(diǎn),所以刪除結(jié)點(diǎn)的結(jié)果會(huì)不一樣的),這是因?yàn)楫?dāng)你把索引為0的子節(jié)點(diǎn)刪除后那么很自然的原來索引
為1節(jié)點(diǎn)此時(shí)它的索引變成0了,而這時(shí)變量i已經(jīng)變成1了,程序繼續(xù)走時(shí)就會(huì)刪除原先索引為2的現(xiàn)在為1的節(jié)點(diǎn),這樣程序運(yùn)行的結(jié)果就是只刪除了一半的子節(jié)點(diǎn),用for in遍歷結(jié)果也是一樣的。想正常的刪除全部節(jié)點(diǎn)
的話,我們應(yīng)該從后面往前刪除,代碼如下:
for(var i = childs.length - 1; i >= 0; i--) { alert(childs[i].nodeName); f.removeChild(childs[i]); }
我們從索引最大值開始刪除,采用遞減的方法,這樣索引便不會(huì)移動(dòng)改變了。
- JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
- 利用vue.js插入dom節(jié)點(diǎn)的方法
- JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法實(shí)例總結(jié)
- javascript獲取網(wǎng)頁中指定節(jié)點(diǎn)的父節(jié)點(diǎn)、子節(jié)點(diǎn)的方法小結(jié)
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- JS 獲取HTML標(biāo)簽內(nèi)的子節(jié)點(diǎn)的方法
- 淺談js的html元素的父節(jié)點(diǎn),子節(jié)點(diǎn)
- 刪除javascript所創(chuàng)建子節(jié)點(diǎn)的方法
- js 獲取元素所有兄弟節(jié)點(diǎn)的實(shí)現(xiàn)方法
- JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法
- JS實(shí)現(xiàn)DOM節(jié)點(diǎn)插入操作之子節(jié)點(diǎn)與兄弟節(jié)點(diǎn)插入操作示例
相關(guān)文章
js實(shí)現(xiàn)提交前對列表數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)提交前對列表數(shù)據(jù)的增刪改查,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01extjs簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了extjs簡介,ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件,具有統(tǒng)一的主題,便于快速開發(fā),提高效率2017-07-07如何在TypeScript使用模塊化以及注意事項(xiàng)詳解
在TypeScript中就像在EC5中一樣,任何包含頂級(jí)import或export的文件都被認(rèn)為是一個(gè)模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊化以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-10-10基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng)實(shí)例
這篇文章主要介紹了基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng),涉及javascript針對頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上
在做前端開發(fā)的時(shí)候,少不了要用一些模擬的json的數(shù)據(jù)來進(jìn)行測試,這篇文章主要給大家介紹了關(guān)于uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上的相關(guān)資料,需要的朋友可以參考下2022-08-08關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法
最近在使用JS動(dòng)畫做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動(dòng)畫執(zhí)行時(shí)間內(nèi)快速移開鼠標(biāo)時(shí)會(huì)出現(xiàn)動(dòng)畫因鼠標(biāo)移動(dòng)過快從而導(dǎo)致代碼沖突讓畫面抖動(dòng)的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法,需要的朋友可以參考下2022-06-06javascript設(shè)計(jì)模式 – 解釋器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 解釋器模式,結(jié)合實(shí)例形式分析了javascript解釋器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
這篇文章主要介紹了Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享,本文直接給出實(shí)現(xiàn)的代碼,需要的朋友可以參考下2015-05-05