在 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 浏览器上的所有内容。
