JavaScript 按 ID 删除元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 按 ID 删除元素

作者：迹忆客最近更新：2023/03/10 浏览次数：

本篇文章介绍如何使用 JavaScript 中的 id 删除 HTML 元素。

在 JavaScript 中将 `outerHTML` 属性设置为空字符串以按 ID 删除元素

在这个方法中，我们通过分配一个空字符串来选择元素并删除 HTML 内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   document.getElementById("removeme").outerHTML = "";
</script>
</html>

这是一种简单的方法，但由于以下限制而很少使用：

在 JavaScript 中使用 `removeChild()` 按 ID 删除元素

我们首先使用其 id 选择元素，然后在此方法中调用其父级的 removeChild() 函数。这种方法提供了维护 DOM 树结构的优点。

它迫使我们模仿从树中删除元素的内部行为，这样我们就不会删除父节点本身。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   function remove(id) 
	 {
     var element = document.getElementById(id);
     return element.parentNode.removeChild(element);
	 }
   remove("removeme");
</script>
</html>

在 JavaScript 中使用 `remove()` 按 ID 删除元素

remove() 方法是作为 ES5 的一部分引入的。它允许我们直接删除元素而不去其父元素。但与 removeChild() 方法不同，它不返回对已删除节点的引用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <h1 id="app">Hello World!!</h1>
   <p id="removeme">Remove Me</p>
</body>
<script>
   document.getElementById("removeme").remove();
</script>
</html>