JavaScript--删除DOM

Posted Z && Y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript--删除DOM相关的知识,希望对你有一定的参考价值。

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]);
    }

在这里插入图片描述



以上是关于JavaScript--删除DOM的主要内容,如果未能解决你的问题,请参考以下文章