数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中删除现有的 HTML 元素？
本文讨论了如何在 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>
执行上述代码后，将生成以下输出。
单击按钮前 -
单击按钮后 -
更新于: 2023-09-06
45K+ 浏览量
广告