如何在 JavaScript 中删除现有的 HTML 元素？
javascriptweb developmentfront end technology
本文讨论如何在 JavaScript 中删除现有元素。要删除现有的 HTML 元素，我们首先需要从文档中选择要删除的元素。然后，使用 JavaScript 中的 remove() 和 removeChild() 等方法从文档中删除元素。我们将在本文中讨论这两种方法。
使用 remove() 方法
JavaScript 的 remove() 方法将从文档中删除元素。remove 方法的语法如下所示。
Obj.remove();
使用 removeChild() 方法
JavaScript 的 removeChild() 方法将从文档中删除元素。removeChild() 方法的语法如下所示。
Obj.removeChild()
让我们看看这些示例 -
示例 1
使用 remove() 方法
这是一个使用 remove() 方法从 HTML DOM 中删除元素的示例程序。
<!DOCTYPE HTML>
<html>
<head>
<title>How to remove an HTML element using JavaScript</title>
</head>
<body style = "text-align:center;">
<p id="text1"></p>
<p id="text2">There are two methods to delete HTML elements - remove method and removeChild method.</p>
<button onClick = "RemoveDOMelement()">click here</button>
<p id = "text3"></p>
<!-- Script to remove HTML element -->
<script>
var up = document.getElementById('text1');
var para = document.getElementById('text2');
var down = document.getElementById('text3');
up.innerHTML = "Click on the below button to remove an element";
function RemoveDOMelement() {
para.remove();
down.innerHTML = "The paragraph is deleted.";
}
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
点击按钮后 -
示例 2
使用 removeChild() 方法
以下是使用 removeChild() 方法从 HTML DOM 中删除元素的示例程序。
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var parent = document.getElementById("new");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 3
以下是另一个使用 removeChild() 方法从 HTML DOM 中删除元素的示例程序。
<!DOCTYPE HTML>
<html>
<head>
<title> How to remove an HTML element using JavaScript</title>
</head>
<body style = "text-align:center;">
<p id="text1"></p>
<p id="text2">There are two methods to delete HTML elements - remove method and removeChild method.</p>
<button onClick = "RemoveDOMelement()">click here</button>
<p id = "text3"></p>
<!-- Script to remove HTML element -->
<script>
var up = document.getElementById('text1');
var para = document.getElementById('text2');
var down = document.getElementById('text3');
up.innerHTML = "Click on the below button to remove an element";
function RemoveDOMelement() {
para.parentNode.removeChild(para);
down.innerHTML = "The paragraph is deleted.";
}
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
点击按钮前 −
点击按钮后 −
