JavaScript中removeChild 方法開發(fā)示例代碼
更新時間：2016年08月15日 15:10:19 作者：fangfan
這篇文章主要介紹了JavaScript中removeChild 方法開發(fā)示例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
1. 概述
刪除后的節(jié)點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置。
當你遍歷一個父節(jié)點的子節(jié)點并進行刪除操作時，要注意，children屬性是一個只讀屬性，并且它在子節(jié)點變化時會實時更新
// 拿到待刪除節(jié)點:
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點:
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ā)示例代碼，希望對大家有所幫助,如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
直接用ID屬性進行引用 直接用NAME屬性進行引用 使用getElementById(),getElementsByName(),getElementsByTagName()進行引用2009-06-06
javascript使用isNaN()函數(shù)判斷變量是否為數(shù)字
javascript中判斷變量是否為數(shù)字的方法，這里主要介紹javascript里的 isNaN() 函數(shù)，具體使用如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了通過JS深度判斷兩個對象字段相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了小程序中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-11-11
67 個節(jié)約開發(fā)時間的前端開發(fā)者的工具、庫和資源
在本文中，我不會去談 React、Angular、Vue 等等這些大的前端框架，也不會談 Atom、VS code、Sublime 等等這些已經很出名的代碼編輯器，我只是想簡單的分享一套我認為有助于提升開發(fā)者工作流的工具集2017-09-09
移動端Web需要照顧觸摸操作的體驗,以及更多的屏幕旋轉與尺寸適配等問題,非?，嵥?在這里為大家傾力總結40條常見的移動端Web頁面問題解決方案,歡迎收看收藏!2016-05-05
JavaScript事件循環(huán)及宏任務微任務原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務微任務原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了在 webpack 中使用 ECharts的實例代碼,需要的朋友可以參考下2018-02-02