Javascript 按 ID 删除元素

📌 相关文章

📜 Javascript 按 ID 删除元素 - Javascript - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:43.061000 🧑 作者: Mango

在 Web 开发过程中，我们有时需要通过 Javascript 删除一个 HTML 元素。本文将介绍如何使用 Javascript 按 ID 删除元素。

取得元素

要删除一个元素，首先需要得到该元素的引用。我们可以通过 document.getElementById() 方法获取元素，该方法需要传入要查找的元素的 ID，它将返回包含该元素的对象。代码如下：

const element = document.getElementById('element-id');

删除元素

一旦获得元素的引用，我们可以使用其 remove() 方法从 DOM 中删除它。代码如下：

const element = document.getElementById('element-id');
element.remove();

在上面的代码中，我们首先获取了具有 element-id 属性的元素的引用，然后使用 remove() 方法将其从 DOM 中删除。

完整代码

下面是一个完整的实例代码，它演示了如何使用 getElementById() 和 remove() 方法删除 HTML 元素：

<!DOCTYPE html>
<html>
<head>
  <title>Javascript 删除元素</title>
</head>
<body>

  <p id="my-paragraph">这是一个段落。</p>

  <button onclick="removeElement()">删除元素</button>

  <script>
    function removeElement() {
      const element = document.getElementById('my-paragraph');
      element.remove();
    }
  </script>

</body>
</html>

在上面的 HTML 代码中，我们定义了一个段落元素和一个按钮。当按钮被点击时，removeElement() 函数将调用 getElementById() 和 remove() 方法来删除段落元素。

结论

在 Javascript 中，我们可以使用 getElementById() 和 remove() 方法来删除 HTML 元素。以上是一个基本的例子，可以在实际项目中进行修改和扩展，以满足更复杂的需求。