Javascript removeChild()刪除節(jié)點及刪除子節(jié)點的方法
下面給大家介紹Javascript removeChild()刪除節(jié)點的方法，具體詳情如下所示：
在Javascript中，只提供了一種刪除節(jié)點的方法：removeChild()。
removeChild() 方法用來刪除父節(jié)點的一個子節(jié)點。
語法：
parent.removeChild(thisNode)
參數(shù)說明：
| 參數(shù) | 說明 |
|---|---|
| thisNode | 當(dāng)前節(jié)點，即要刪除的節(jié)點 |
| parent | 當(dāng)前節(jié)點的父節(jié)點，即 thisNode.parentNode |
例如，刪除 id="demo" 的節(jié)點的語句為：
var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);
舉例，刪除節(jié)點：
<div id="demo">
<div id="thisNode">點擊刪除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
this.parentNode.removeChild(this);
}
</script>
實例演示：
可以看出來，雖然Javascript只提供了一種刪除節(jié)點的方法，但是足夠用了。
ps:JavaScript刪除子節(jié)點的方法
HTML代碼如下：
<div id="f"> <div>a</div> <div>b</div> <div>c</div> </div>
如果想刪除f節(jié)點下的所有子節(jié)點，很自然也很正常想到的方法應(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)程序運行后我們發(fā)現(xiàn)無論在FireFox還是在IE下，均不能完全的刪除所有的子節(jié)點（FireFox中把空白區(qū)域也
當(dāng)成節(jié)點，所以刪除結(jié)點的結(jié)果會不一樣的），這是因為當(dāng)你把索引為0的子節(jié)點刪除后那么很自然的原來索引
為1節(jié)點此時它的索引變成0了，而這時變量i已經(jīng)變成1了，程序繼續(xù)走時就會刪除原先索引為２的現(xiàn)在為1的節(jié)點，這樣程序運行的結(jié)果就是只刪除了一半的子節(jié)點，用for in遍歷結(jié)果也是一樣的。想正常的刪除全部節(jié)點
的話，我們應(yīng)該從后面往前刪除，代碼如下：
for(var i = childs.length - 1; i >= 0; i--) {
alert(childs[i].nodeName);
f.removeChild(childs[i]);
}
我們從索引最大值開始刪除，采用遞減的方法，這樣索引便不會移動改變了。
- JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】
- 利用vue.js插入dom節(jié)點的方法
- JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法實例總結(jié)
- javascript獲取網(wǎng)頁中指定節(jié)點的父節(jié)點、子節(jié)點的方法小結(jié)
- js遍歷子節(jié)點子元素附屬性及方法
- JS 獲取HTML標(biāo)簽內(nèi)的子節(jié)點的方法
- 淺談js的html元素的父節(jié)點,子節(jié)點
- 刪除javascript所創(chuàng)建子節(jié)點的方法
- js 獲取元素所有兄弟節(jié)點的實現(xiàn)方法
- JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法
- JS實現(xiàn)DOM節(jié)點插入操作之子節(jié)點與兄弟節(jié)點插入操作示例
相關(guān)文章
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
解決bootstrap中下拉菜單點擊后不關(guān)閉的問題
今天小編就為大家分享一篇解決bootstrap中下拉菜單點擊后不關(guān)閉的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript 一個自定義長度的文本自動換行的函數(shù)
javascript 一個自定義長度的文本自動換行的函數(shù)...2007-08-08
下面小編就為大家分享一篇mui框架 頁面無法滾動的解決方法(推薦)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹JavaScript的三種this指向的方法：call()、bind()、apply()，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-05-05
BootStrap select2 動態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動態(tài)改變值的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
本篇文章實例演示了Javascript的面向?qū)ο?-接口的用法。希望對大家有所幫助，下面就隨小編一起來看看吧2016-12-12
出于安全性考慮，JS是不能直接設(shè)置File的value值的，下面是我總結(jié)出來的方法2010-09-09
這篇文章主要為大家詳細介紹了移動端web滾動分頁的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript字符串的json的自定義加密解密函數(shù)示例
JavaScript自定義函數(shù)中使用String.fromCharCode函數(shù)將輸入字符串中每個字符的Unicode編碼加1,然后將加密后的字符拼接成一個新字符串返回,調(diào)用JSON.stringify函數(shù)轉(zhuǎn)換json成一個普通字符串2023-12-12