資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
廣告