快捷導(dǎo)航

Javascript刪除指定元素節(jié)點(diǎn)的方法

更新時(shí)間：2016年06月21日 11:25:44 作者：沫魚

這篇文章主要介紹了使用Javascript刪除指定元素節(jié)點(diǎn)的方法,通俗易懂,需要的朋友可以參考下。

在javascript操作dom樹的時(shí)候可能會(huì)經(jīng)常遇到增加，刪除節(jié)點(diǎn)的事情，比如一個(gè)輸入框后一個(gè)增加按鈕，一個(gè)刪除按鈕，點(diǎn)擊增加就增加個(gè)輸入框，點(diǎn)擊刪除就刪除對(duì)應(yīng)的輸入框。在一些js框架，如Prototype中，可以用element.remove()來刪除一個(gè)節(jié)點(diǎn)，核心JS中并沒有這樣的方法，IE中有這樣一個(gè)方法:removeNode()，嘗試運(yùn)行下面的代碼

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

可以發(fā)現(xiàn)，這個(gè)方法在IE下是好使的，但是在Firefox等標(biāo)準(zhǔn)瀏覽器中就會(huì)報(bào)錯(cuò)了 removeNode is not defined，但是在核心JS中有一個(gè)操作DOM節(jié)點(diǎn)的方法叫：removeChild()，看名字應(yīng)該就知道是移除子節(jié)點(diǎn)的，那么我們就可以變通一下來實(shí)現(xiàn)移除指定的節(jié)點(diǎn)了，我們可以先去找到要?jiǎng)h除節(jié)點(diǎn)的父節(jié)點(diǎn)，然后在父節(jié)點(diǎn)中運(yùn)用removeChild來移除我們想移除的節(jié)點(diǎn)。我們可以定義一個(gè)方法，就叫removeElement吧。

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

嘗試運(yùn)行下面的代碼，可以在各種瀏覽器中正確執(zhí)行了。

<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="點(diǎn)擊移除該輸入框" /></div>

以上就是本文的全部?jī)?nèi)容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js查錯(cuò)流程歸納
歸納是為了更好的理解。平時(shí)同事有問題找我?guī)兔鉀Q問題，往往都是很小的問題，這種情況他們并不是缺乏解決問題的知識(shí)，而是需要找到問題的辦法
2012-05-05
JavaScript ES6 Class類實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實(shí)現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
JavaScript function函數(shù)種類詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解
類型強(qiáng)制Coercion是將值從一種類型轉(zhuǎn)換為另一種類型的過程（例如字符串轉(zhuǎn)換為數(shù)字,對(duì)象轉(zhuǎn)換為布爾值等）,下面這篇文章主要給大家給大家介紹了JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
2021-08-08
JavaScript中5種調(diào)用函數(shù)的方法
這篇文章主要介紹了JavaScript中5種調(diào)用函數(shù)的方法,本文詳細(xì)的介紹了Javascript中各種函數(shù)調(diào)用的方法及其原理,對(duì)于理解JavaScript的函數(shù)有很大的幫助,需要的朋友可以參考下
2015-03-03
微信小程序組件開發(fā)之可視化電影選座功能
開發(fā)微信小程序的過程中,選擇一款好用的組件庫(kù),可以達(dá)到事半功倍的效果,下面這篇文章主要給大家介紹了關(guān)于微信小程序組件開發(fā)之可視化電影選座功能的相關(guān)資料,需要的朋友可以參考下
2021-08-08
微信小程序icon組件使用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序icon組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
javascript+css 網(wǎng)頁(yè)每次加載不同樣式的實(shí)現(xiàn)方法
用戶每次訪問時(shí)隨機(jī)載入樣式，讓微博在視覺上保持新鮮感。雖然思路與實(shí)現(xiàn)都比較簡(jiǎn)單，但還是想記錄下來，與大家分享。
2009-12-12
JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-02-02