[JavaScript基础]学习③②--删除DOM

删除一个节点

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

删除后的节点不在文档树中，但还在内存中

children属性是一个只读属性，并且它在子节点变化时会实时更新

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

练习 删除Web开发技术不相关的节点

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

'use strict';
var parent = document.getElementById('test-list');

for (var i=0; i<parent.children.length; i++) {
    var text = parent.children[i].innerText;
    if (text == 'Swift' || text == 'ANSI C' || text == 'DirectX') {
        parent.removeChild(parent.children[i]);
    }
};