JavaScript Element nach ID entfernen

JavaScript Element nach ID entfernen

  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

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>

Verwandter Artikel - JavaScript DOM

  • Tabelle mit JavaScript erstellen
  • Text zu Element in JavaScript hinzufügen
  • Die Position der Bildlaufleiste mit JavaScript abrufen
  • Element nach Typ in JavaScript abrufen
  • Ermitteln der Position eines Elements mit JavaScript