JavaScript中removeChild 方法開發(fā)示例代碼

更新時(shí)間：2016年08月15日 15:10:19 作者：fangfan

這篇文章主要介紹了JavaScript中removeChild 方法開發(fā)示例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1. 概述

刪除后的節(jié)點(diǎn)雖然不在文檔樹中了，但其實(shí)它還在內(nèi)存中，可以隨時(shí)再次被添加到別的位置。

當(dāng)你遍歷一個(gè)父節(jié)點(diǎn)的子節(jié)點(diǎn)并進(jìn)行刪除操作時(shí)，要注意，children屬性是一個(gè)只讀屬性，并且它在子節(jié)點(diǎn)變化時(shí)會(huì)實(shí)時(shí)更新

// 拿到待刪除節(jié)點(diǎn):
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點(diǎn):
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
removed === self; // true

2. example

<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
<ul id="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSI C</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
<script>
var p= document.getElementById('test-list');
var length = p.children.length;
var i=0;
for(; i<length; ){
var li = p.children[i];
var text = li.innerText;
if(text!=='JavaScript' && text!=='HTML' && text!=='CSS'){
p.removeChild(li);
alert(p.children.toString());
length--;
}else{
i++;
}
}
// 測試:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 3) {
arr = [];
for (i = 0; i < t.children.length; i ++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
alert('測試通過!');
}
else {
alert('測試失敗: ' + arr.toString());
}
}
else {
alert('測試失敗!');
}
})();
</script>
</body>
</html>

以上所述是小編給大家介紹的JavaScript中removeChild 方法開發(fā)示例代碼，希望對大家有所幫助,如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js在Firefox與IE中對DOM對像的引用的比較
直接用ID屬性進(jìn)行引用直接用NAME屬性進(jìn)行引用使用getElementById(),getElementsByName(),getElementsByTagName()進(jìn)行引用
2009-06-06
javascript使用isNaN()函數(shù)判斷變量是否為數(shù)字
javascript中判斷變量是否為數(shù)字的方法，這里主要介紹javascript里的 isNaN() 函數(shù)，具體使用如下，感興趣的朋友可以參考下
2013-09-09
通過JS深度判斷兩個(gè)對象字段相同
這篇文章主要介紹了通過JS深度判斷兩個(gè)對象字段相同，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
微信小程序父子組件通信詳細(xì)介紹
這篇文章主要介紹了小程序中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-11-11
67 個(gè)節(jié)約開發(fā)時(shí)間的前端開發(fā)者的工具、庫和資源
在本文中，我不會(huì)去談 React、Angular、Vue 等等這些大的前端框架，也不會(huì)談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡單的分享一套我認(rèn)為有助于提升開發(fā)者工作流的工具集
2017-09-09
傾力總結(jié)40條常見的移動(dòng)端Web頁面問題解決方案
移動(dòng)端Web需要照顧觸摸操作的體驗(yàn),以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問題,非?，嵥?在這里為大家傾力總結(jié)40條常見的移動(dòng)端Web頁面問題解決方案,歡迎收看收藏!
2016-05-05
JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
Js獲取圖片原始寬高的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧
2016-05-05
JavaScript實(shí)現(xiàn)雪花飄落效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
在 webpack 中使用 ECharts的實(shí)例詳解
這篇文章主要介紹了在 webpack 中使用 ECharts的實(shí)例代碼,需要的朋友可以參考下
2018-02-02