Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法

更新時(shí)間：2015年12月27日 10:14:30 投稿：mrr

這篇文章主要介紹了Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法的相關(guān)資料,需要的朋友可以參考下

下面給大家介紹Javascript removeChild()刪除節(jié)點(diǎn)的方法，具體詳情如下所示：

在Javascript中，只提供了一種刪除節(jié)點(diǎn)的方法：removeChild()。

removeChild() 方法用來(lái)刪除父節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)。

語(yǔ)法：

parent.removeChild(thisNode)

參數(shù)說(shuō)明：

參數(shù)	說(shuō)明
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)的語(yǔ)句為：

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í)例演示：

可以看出來(lái)，雖然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)無(wú)論在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)刪除后那么很自然的原來(lái)索引
為1節(jié)點(diǎn)此時(shí)它的索引變成0了，而這時(shí)變量i已經(jīng)變成1了，程序繼續(xù)走時(shí)就會(huì)刪除原先索引為２的現(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)改變了。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Javascript removeChild()刪除節(jié)點(diǎn)及刪除子節(jié)點(diǎn)的方法

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具