DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript刪除指定元素節點的方法
Javascript刪除指定元素節點的方法
編輯:關於JavaScript     

在javascript操作dom樹的時候可能會經常遇到增加,刪除節點的事情,比如一個輸入框後一個增加按鈕,一個刪除按鈕,點擊增加就增加 個輸入框,點擊刪除就刪除對應的輸入框。在一些js框架,如Prototype中,可以用element.remove()來刪除一個節點,核心JS中並 沒有這樣的方法,IE中有這樣一個方法:removeNode(),嘗試運行下面的代碼

<div><input onclick="removeNode(this)" type="text" value="點擊移除該輸入框" /></div>

可以發現,這個方法在IE下是好使的,但是在Firefox等標准浏覽器中就會報錯了 removeNode is not defined,但是在核心JS中有一個操作DOM節點的方法叫:removeChild(),看名字應該就知道是移除子節點的,那麼我們就可以變通一下 來實現移除指定的節點了,我們可以先去找到要刪除節點的父節點,然後在父節點中運用removeChild來移除我們想移除的節點。我們可以定義一個方 法,就叫removeElement吧。

function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element); 
 }
}

嘗試運行下面的代碼,可以在各種浏覽器中正確執行了。

<script type="text/javascript">
function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element);
 }
}
</script>
<div><input onclick="removeElement(this)" type="text" value="點擊移除該輸入框" /></div>

以上就是本文的全部內容,了解更多JavaScript的語法,大家可以查看:《JavaScript 參考教程》、《JavaScript代碼風格指南》,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved