如何在 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>
执行上述代码后,将生成以下输出。
点击按钮前 −
点击按钮后 −