删除一个节点
// 拿到待删除节点:
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]);
}
};
