IE 瀏覽器中不能使remove刪除節點的解決方法
阿新 • • 發佈：2019-01-07
在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>
<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>