JavaScript Element nach ID entfernen

Harshit Jindal 20 März 2022
  1. Setzen Sie das Attribut outerHTML auf eine leere Zeichenfolge, um Element nach ID in JavaScript zu entfernen
  2. Verwenden Sie removeChild(), um Element nach ID in JavaScript zu entfernen
  3. Verwendung von remove() zum Entfernen von Elementen nach Id in JavaScript
JavaScript Element nach ID entfernen

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:

  1. Es ist um 5-10% langsamer als removeChild() und andere neuere ES5-Methoden wie remove().
  2. 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 avatar Harshit Jindal avatar

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

Verwandter Artikel - JavaScript DOM