编程技术文章分享与教程

网站首页 > 技术文章 正文

七爪源码:如何使用 JavaScript 通过其 ID 删除 DOM 元素

hmc789 2024-11-27 14:45:58 技术文章 2 ℃

了解如何使用 JavaScript 通过 ID 轻松删除 HTML DOM 中的元素。

在本文中，我们将学习如何使用 JavaScript 通过 ID 轻松删除 HTML DOM 中的元素。


元素 remove() 方法

要按 ID 删除 DOM 元素，请使用 getElementById() 方法选择具有 ID 的元素，然后对该元素调用 remove() 方法。

例如：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div class="box" id="box-1">This is a box</div>    <script src="index.js"></script>
  </body>
</html>

以下是我们如何删除具有 box-1 id 的元素：

index.js

const box = document.getElementById('box-1');
box.remove();

getElementById() 方法接受一个字符串并返回 DOM 中具有与该字符串匹配的 ID 的元素。

如果没有匹配 ID 的元素，getElementByID() 将返回 null。

index.js

const box = document.getElementById('box-5');
console.log(box); // null

如果没有带有 ID 的 DOM 元素，我们可以使用可选的链接运算符 (?.) 来调用 remove() 以避免导致错误。

可选的链接运算符不会导致错误，而是会阻止方法调用并返回未定义的。

index.js

const box = document.getElementById('box-5');
box?.remove(); // no error thrown


如何在不移除子元素的情况下移除 DOM 元素

remove() 方法删除一个 DOM 元素及其子元素。 如果想要将元素的子元素保留在 DOM 中怎么办？

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>    <div id="parent">
      <p>Child 1</p>
      <p>Child 2</p>
    </div>    <script src="index.js"></script>
  </body>
</html>

要移除 ID 为 parent 的 div 元素但保留其子元素，我们可以在 div 上调用 replaceWith() 方法，将元素的子元素作为参数传递。

index.js

const element = document.getElementById('parent');element.replaceWith(...element.childNodes);

现在文档的标记将如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <p>Child 1</p>
    <p>Child 2</p>    <script src="index.js"></script>
  </body>
</html>

childNodes 属性返回元素的子节点列表。 我们使用它来获取元素的子元素。

replaceWith() 方法用一组 Node 或字符串对象替换 DOM 中的元素。 我们在元素上调用它以用子元素替换它。


关注七爪网，获取更多APP/小程序/网站源码资源！

Tags：

猜你喜欢

标签列表
最新留言