JS移除DOM元素|极客笔记

JS移除DOM元素

在前端开发中，经常会涉及到操作DOM元素的需求，其中包括添加、修改和移除DOM元素。本文将重点讨论如何使用JavaScript来移除DOM元素。

方法一：parentNode.removeChild()

parentNode.removeChild()方法是最常见和最基本的一种移除DOM元素的方式。通过调用父节点的removeChild()方法，可以将指定的子节点从DOM中移除。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Element</title>
</head>
<body>
  <div id="container">
    <p id="paragraph">Hello, World!</p>
  </div>

  <button id="removeBtn">Remove Paragraph</button>

  <script>
    const removeBtn = document.getElementById('removeBtn');
    const paragraph = document.getElementById('paragraph');

    removeBtn.addEventListener('click', () => {
      const container = document.getElementById('container');
      container.removeChild(paragraph);
    });
  </script>
</body>
</html>

运行效果：

当点击”Remove Paragraph”按钮时，

Hello, World!

这个段落元素将从DOM中移除。

方法二：Element.remove()

除了使用parentNode.removeChild()方法外，还可以使用元素本身的remove()方法来移除DOM元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Element</title>
</head>
<body>
  <div id="container">
    <p id="paragraph">Hello, World!</p>
  </div>

  <button id="removeBtn">Remove Paragraph</button>

  <script>
    const removeBtn = document.getElementById('removeBtn');
    const paragraph = document.getElementById('paragraph');

    removeBtn.addEventListener('click', () => {
      paragraph.remove();
    });
  </script>
</body>
</html>