資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學JavaScript 中如何根據 ID 刪除元素？
在 JavaScript 中根據 ID 刪除元素的方法是操作 DOM（文件物件模型）的強大工具。它允許您根據 ID 從頁面中刪除元素。這在刪除不需要的元素或動態建立內容時非常有用。語法很簡單，本文將更詳細地解釋如何使用它。
為了使網站具有互動性，JavaScript 提供了許多功能。從網頁中刪除節點或元素是 JavaScript 提供的最基本功能之一。
讓我們按照以下步驟瞭解如何在 JavaScript 中刪除元素。
getElementByID 方法
remove() 方法
讓我們深入瞭解本文，以便更好地理解如何在 JavaScript 中根據 ID 刪除元素。
getElementByID 方法
顧名思義，getElementsByID JavaScript 方法用於查詢元素的 ID 並將其返回給變數。返回元素的值可用於許多工。
語法
以下是 getElemnetByID 的語法
remove() 方法
可以使用 JavaScript 的 remove() 方法刪除元素或節點。不需要引數，也不返回值。
語法
以下是 remove() 的語法
element.remove()
讓我們看看以下示例，以瞭解更多關於如何在 JavaScript 中根據 ID 刪除元素的資訊。
示例
在下面的示例中，我們執行一個簡單的指令碼刪除元素
<!DOCTYPE html>
<html>
<body>
<h1 id="tutorial">welcome</h1>
<button onclick="myRemoveFunction()">Click To Remove</button>
<script>
function myRemoveFunction() {
var textRemove = document.getElementById("tutorial");
textRemove.remove();
}
</script>
</body>
</html>
指令碼執行後，它將在網頁上生成包含文字和按鈕的輸出。當用戶單擊按鈕時，將觸發事件，並刪除網頁上的<h1>文字。
示例
考慮以下使用輸入欄位和 remove() 方法的示例。
<!DOCTYPE html>
<html>
<body>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<button onclick="myRemoveFunction()">Click To Remove</button>
<script>
function myRemoveFunction() {
var textRemove = document.getElementById("fname");
textRemove.remove();
}
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器將顯示輸入欄位和單擊按鈕。當用戶單擊按鈕時，將觸發事件並刪除網頁上的輸入文字區域框。
示例
讓我們考慮另一個示例，我們使用 div 和 remove()
<!DOCTYPE html>
<html>
<body>
<div id="tutorial">
<input type="text"><br>
<input type="text"><br>
<input type="radio"><br>
<input type="text"><br>
<input type="radio"><br>
</div><br>
<span id='totalNumberOfTextBox'></span>
<button onclick="myRemoveFunction()">Click To Remove</button>
<script>
function myRemoveFunction() {
var textRemove = document.getElementById("tutorial");
textRemove.remove();
}
</script>
</body>
</html>
指令碼執行後，它將在 Web 瀏覽器上生成包含輸入欄位、單選按鈕和單擊按鈕的輸出。當用戶單擊按鈕時，將觸發一個事件，該事件將刪除 Web 瀏覽器上的所有內容。
6000+ 次瀏覽
