jQuery Schnellstart – Inhalte & Elemente löschen

Du lernst in dieser Lektion, wie Du die HTML-Elemente oder deren Inhalt sowie deren Attribut mit jQuery aus dem Dokument entfernen kannst.

jQuery Elemente oder Inhalte entfernen

jQuery bietet eine einige Methoden wie empty(), remove(), replaceAll() und unwrap(), um vorhandene HTML-Elemente oder Inhalte aus dem Dokument zu entfernen.

empty() Methode

Die Methode empty() entfernt alle untergeordneten Elemente sowie andere untergeordnete Elemente und den Textinhalt innerhalb der ausgewählten Elemente aus dem DOM.

Im folgenden Beispiel wird der gesamte Inhalt innerhalb der Elemente mit der CSS-Klasse .box beim Klicken auf die Schaltfläche entfernt.

<script>
  $(document).ready(function() {
      $("button").click(function() {
         $(".box").empty();
      });
  });
</script>

 

remove() Methode

Die remove()-Methode entfernt Elemente, wie durch einen Selektor angegeben.

Gib zunächst einen Selektorausdruck an, um die Referenz eines oder mehrerer Elemente zu erhalten, die Du aus dem Dokument entfernen möchtest, und rufe dann die remove()-Methode auf.

<script>
  $(document).ready(function() {
    $("a").remove();
  });
</script>

 

replaceAll() Methode

Die jQuery-Methode replaceAll() ersetzt alle Zielelemente durch das/die angegebene(n) Element(e).

$('Inhaltsstring').replaceAll('Selektor');

Hier ist die Syntax anders. Gibt zuerst eine Inhaltszeichenfolge als Ersatzelement(e) an und rufe dann die Methode replaceAll() mit Selektorausdruck auf, um ein oder mehrere Zielelemente anzugeben.

<script>
  $(document).ready(function() {
     $('<span>Text ersetzt</span>').replaceAll('p');      
  });
</script>

Fazit

In dieser Lektion hast du gelernt, wie Du die HTML-Elemente oder deren Inhalt sowie deren Attribute mit jQuery aus einem Dokument entfernen kannst. Dafür benutzt du die Methoden empty(), remove(), replaceAll() und unwrap(). Probiere alle hier aufgeführten Methoden aus, bevor Du weitermachst.

In der nächsten Lektion lernst du, wie du CSS Klassen manipulierst.