[JavaScript知识库] JavaScript-操作DOM对象-删除dom节点

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript-操作DOM对象-删除dom节点 -> 正文阅读

[JavaScript知识库]JavaScript-操作DOM对象-删除dom节点

删除节点

删除节点的步骤: 先获取父节点，再通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <h1>标题2</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    // 方式一
    let p1 = document.getElementById('p1');
    let father = p1.parentElement;
    // father.removeChild(p1)

    // 方式二, 方式二是一个动态的过程，删除一个少一个，所以 [] 里面的数字不能从 0~n-1
    console.log(father.children)
    all_ch = father.children
    // father.removeChild(father.children[0])
    father.removeChild(all_ch[0])
    father.removeChild(all_ch[1])
    father.removeChild(all_ch[1])
    father.removeChild(all_ch[0])
</script>

</body>
</html>