JavaScript--删除DOM

Posted 2021-08-12 Z && Y

1. 删除DOM

删除一个DOM节点就比插入要容易得多。插入DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉：

<!-- html结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

删除Java:

    // 拿到待删除节点: 删除Java
    let self = document.getElementById('java');
    // 拿到父节点:
    let parent = self.parentElement;
    // 删除:
    let removed = parent.removeChild(self);
    alert(removed === self) // true 

例如，对于如下HTML结构：

<!-- HTML结构 -->
<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

当我们用如下代码删除子节点时：

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

所有删除指定个数的结点的代码应该为:

<!-- HTML结构 -->
<div id="parent">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

删除1，2，3结点(删除连续的3个结点，for循环遍历3次删除。)

    let parent = document.getElementById('parent');
    for (let i = 0; i < 3; i++) {
        parent.removeChild(parent.children[0]);
    }

---

---