使用 JavaScript 按 ID 删除 DOM 元素

作者

使用 JavaScript 通过 ID 删除 DOM 元素

Remove a DOM element by ID using JavaScript

通过 id 删除 DOM 元素：

  1. 使用 方法选择 DOM 元素document.getElementById()。
  2. remove()在元素上调用，例如element.remove()。
  3. 该remove()方法从 DOM 中删除元素。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const element = document.getElementById('box');

element.remove();

我们使用
document.getElementById
来选择一个元素id。

该getElementById()方法返回一个与提供Element的id字符串相匹配的字符串。

如果idDOM 中没有指定的元素，则该方法返回null。

如果元素不存在，您可以使用可选的链接 (?.) 运算符来避免出现错误。

索引.js
const element = document.getElementById('box');

element?.remove();

如果element变量存储一个null或一个undefined值，则可选的链接运算符会短路而不是调用该remove()方法。

最后一步是使用
Element.remove()
方法从 DOM 中移除元素。

请注意，删除元素也会删除其子元素。

如果您需要在不移除其子元素的情况下移除该元素，请改用此方法。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- 👇️ Only remove this div (not children) -->
    <div id="parent">
      <span>Child 1</span>
      <span>Child 2</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const element = document.getElementById('parent');

element.replaceWith(...element.childNodes);

要删除一个元素而不删除它的子元素，我们基本上用它的子元素替换元素。

示例中的代码只删除了div带有of的元素，而没有删除位于. idparentspan div

如果您需要处理元素不存在的情况，请使用可选的链接运算符 (?.)。

索引.js
const element = document.getElementById('parent');

element?.replaceWith(...element.childNodes);

–

发表评论