极客笔记如何在JavaScript中删除现有的HTML元素？
本文讨论了如何在JavaScript中删除现有元素。要删除现有的HTML元素，首先需要从文档中选择要删除的元素。然后，在JavaScript中使用 remove() 和 removeChild() 方法来从文档中删除元素。本文将讨论这两种方法。
使用remove()方法
JavaScript中的remove()方法将从文档中删除元素。remove方法的语法如下所示。
Obj.remove();
使用removeChild()方法
JavaScript的 removeChild() 方法将从文档中删除元素。 removeChild() 方法的语法如下所示。
Obj.removeChild()
让我们来看一个例子：< /h3>
使用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>