js removeChild 方法

本文轉載自查看原文 2016-08-15 14:41 3876

1. 概述

刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置。

當你遍歷一個父節點的子節點並進行刪除操作時，要注意，children屬性是一個只讀屬性，並且它在子節點變化時會實時更新

// 拿到待刪除節點:
var self = document.getElementById('to-be-removed');
// 拿到父節點:
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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js dom中刪除子節點removeChild JS——DOM操作（createElement、appendChild、insertBefore、removeChild的用法，及todolist案例） JS——is()方法和has()方法 js的split() 方法和join()方法 JS toLowerCase()方法 toUpperCase()方法 Js slice()方法和splice()方法動態添加js的方法 JS的assign()方法 js 事件綁定的方法 js動態調用方法