Javascript：删除一个DOM节点

最新推荐文章于 2026-02-02 12:16:18 发布

原创最新推荐文章于 2026-02-02 12:16:18 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

介绍

在javascript原生DOM操作中，要删除元素必须通过父元素删除。

语法：

父元素.removeChild(要删除的元素)

如果不存在亲父子关系则删除不成功
删除节点和隐藏节点（display: none;)的区别：隐藏节点，节点还是存在的；但删除节点，则是从html中删除节点

示例

示例：删除ul下面的第一个li，节点就不存在了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>要被干掉的li节点</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 删除节点
    ul.remove(ul.children[0])
  </script>
</body>

</html>

在这里插入图片描述

示例：隐藏节点，节点仍然存在

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <ul>
    <li>要被干掉的li节点</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 删除节点
    ul.remove(ul.children[0])
  </script>
</body>

</html>