下面給大家介紹Javascript removeChild()刪除節點的方法,具體詳情如下所示:
在Javascript中,只提供了一種刪除節點的方法:removeChild()。
removeChild() 方法用來刪除父節點的一個子節點。
語法:
parent.removeChild(thisNode)
參數說明:
例如,刪除 id="demo" 的節點的語句為:
var thisNode=document.getElementById("demo"); thisNode.parentNode.removeNode(thisNode);
舉例,刪除節點:
<div id="demo"> <div id="thisNode">點擊刪除我</div> </div> <script type="text/javascript"> document.getElementById("thisNode").onclick=function(){ this.parentNode.removeChild(this); } </script>
實例演示:
可以看出來,雖然Javascript只提供了一種刪除節點的方法,但是足夠用了。
ps:JavaScript刪除子節點的方法
HTML代碼如下:
<div id="f"> <div>a</div> <div>b</div> <div>c</div> </div>
如果想刪除f節點下的所有子節點,很自然也很正常想到的方法應該就是下面的這段代碼了:
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]); }
當程序運行後我們發現無論在FireFox還是在IE下,均不能完全的刪除所有的子節點(FireFox中把空白區域也
當成節點,所以刪除結點的結果會不一樣的),這是因為當你把索引為0的子節點刪除後那麼很自然的原來索引
為1節點此時它的索引變成0了,而這時變量i已經變成1了,程序繼續走時就會刪除原先索引為2的現在為1的節點,這樣程序運行的結果就是只刪除了一半的子節點,用for in遍歷結果也是一樣的。想正常的刪除全部節點
的話,我們應該從後面往前刪除,代碼如下:
for(var i = childs.length - 1; i >= 0; i--) { alert(childs[i].nodeName); f.removeChild(childs[i]); }
我們從索引最大值開始刪除,采用遞減的方法,這樣索引便不會移動改變了。