JavaScript Element nach ID entfernen
-
Setzen Sie das Attribut
outerHTMLauf eine leere Zeichenfolge, um Element nach ID in JavaScript zu entfernen -
Verwenden Sie
removeChild(), um Element nach ID in JavaScript zu entfernen -
Verwendung von
remove()zum Entfernen von Elementen nach Id in JavaScript
Dieses Tutorial stellt vor, wie Sie ein HTML-Element mithilfe seiner ID in JavaScript entfernen.
Setzen Sie das Attribut outerHTML auf eine leere Zeichenfolge, um Element nach ID in JavaScript zu entfernen
Bei dieser Methode wählen wir das Element aus und löschen den HTML-Inhalt, indem wir einen leeren String zuweisen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").outerHTML = "";
</script>
</html>
Es ist eine einfache Methode, die jedoch aufgrund der folgenden Einschränkungen selten verwendet wird:
- Es ist um 5-10% langsamer als
removeChild()und andere neuere ES5-Methoden wieremove(). - Es wird in älteren Versionen von Internet Explorer nicht unterstützt.
Verwenden Sie removeChild(), um Element nach ID in JavaScript zu entfernen
Wir wählen zuerst das Element anhand seiner ID aus und rufen dann in dieser Methode die Funktion removeChild() seines Elternteils auf. Diese Methode bietet den Vorteil, dass die Baumstruktur von DOM beibehalten wird.
Es zwingt uns, das interne Verhalten beim Entfernen eines Elements aus dem Baum nachzuahmen, damit wir den übergeordneten Knoten selbst nicht löschen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
function remove(id)
{
var element = document.getElementById(id);
return element.parentNode.removeChild(element);
}
remove("removeme");
</script>
</html>
Verwendung von remove() zum Entfernen von Elementen nach Id in JavaScript
Die Methode remove() wurde im Rahmen von ES5 eingeführt. Es ermöglicht uns, das Element direkt zu entfernen, ohne zu seinem übergeordneten Element zu gehen. Aber im Gegensatz zur Methode removeChild() gibt sie keine Referenz auf den entfernten Knoten zurück.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").remove();
</script>
</html>
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn