Entfernen Sie alle Elemente mit einer bestimmten Klasse mit JavaScript

Während der Aktualisierung einer Webseite oder der Website sind mit Funktionen bestimmte Elemente zugeordnet, die sofort entfernt werden müssen. Zum Beispiel eine bestimmte Funktionalität (mehrere Effekte mit mehreren Effekten) von einer Webseite auf der Schaltfläche Klicken. In solchen Situationen ist das Entfernen aller Elemente mit einer bestimmten Klasse mit JavaScript eine sehr nützliche Funktion, um eine Website benutzerfreundlich zu gestalten und Zeit zu sparen.

In diesem Blog werden die Ansätze veranschaulicht, um alle Elemente mit bestimmten Klassen mit JavaScript zu entfernen.

So entfernen Sie alle Elemente mit einer bestimmten Klasse mit JavaScript?

Um alle Elemente mit einer bestimmten Klasse mit JavaScript zu entfernen, implementieren Sie die folgenden Ansätze in Kombination mit dem “für jede()" Und "entfernen()Methoden:

• “QuerySelectorAll ()" Methode.
• “Array.aus()" Und "GetElements byclassName ()”Methoden.

Veranschaulichen wir die angegebenen Methoden nacheinander!

Ansatz 1: Entfernen Sie alle Elemente mit einer spezifischen Klasse in JavaScript mithilfe von QuerySelectorAll () -Methode

Der "für jede()Die Methode wendet eine Funktion für jedes in einem Array enthaltene Element an. Der "entfernen()Methode lässt ein Element aus dem Dokument aus. Während die "QuerySelectorAll ()Die Methode holt alle Elemente ab, die einem CSS -Selektor entsprechen, und gibt eine Return eine Knotenliste an. Diese Methoden können in Kombination angewendet werden, um verschiedene Elemente mit identischen Klassen abzurufen, jedes Element durch jedes Element zu iterieren und auf der Schaltfläche Klicken zu entfernen.

Syntax

Array.foreach (Funktion (Strom, Index, Array), dies)

In der oben gegebenen Syntax:

• Funktion: Es ist die Funktion, die für jedes Element in einem Array ausgeführt werden soll.
• aktuell: Dieser Parameter bedeutet den aktuellen Arraywert.
• Index: Es zeigt auf den Index des aktuellen Elements.
• Array: Es bezieht sich auf das aktuelle Array.
• Das: Es entspricht dem Wert, der an die Funktion übergeben wird.

dokumentieren.QuerySelectorall (Selektoren)

In der angegebenen Syntax:

• “Selektoren”Entspricht einem oder mehr als einem CSS -Selektor.

Beispiel
Lassen Sie uns das folgende Beispiel durchlaufen:

Dies ist ein Bild

Klicken Sie hier, um Elemente zu entfernen

Wenden Sie die folgenden Schritte im obigen Code -Snippet an:

• Im HTML -Code der “

  " Und "Elemente haben jeweils die gleichen Klassen.

• Erstellen Sie auch eine Schaltfläche mit einer "ONCLICKEreignis auf die Funktion removeLements ().
• Deklarieren Sie nun im JS -Code eine Funktion namens “REMENELEMENT ()”.
• Wenden Sie in seiner Definition das an “QuerySelectorAll ()Methode und auf die angegebene Klasse gegen die Elemente wie im ersten Schritt angegeben.
• Danach rufen Sie die “auf"für jede()Methode zum Zugriff auf jedes Element über Iteration.
• Schließlich wenden Sie die “an“entfernen()Methode zum Entfernen der iterierten Elemente im vorherigen Schritt gegen die abgerufene Klasse.
• Dies führt dazu, dass alle Elemente auf dem Schaltflächenklick die jeweilige Klasse entfernen.

Ausgang

In der obigen Ausgabe kann beobachtet werden.

Ansatz 2: Entfernen Sie alle Elemente mit einer bestimmten Klasse in JavaScript mit Array.Von () und Getelements byclassName () Methoden

Der "Array.aus()Die Methode gibt ein Array aus einem Objekt mit der Länge des Arrays als Parameter zurück. Der "GetElements byclassName ()Die Methode gibt die Sammlung eines Elements mit einem angegebenen Klassennamen (en) an. Diese Methoden können kombiniert werden, um auf die Elemente nach dem Unterricht zuzugreifen und zurückzukehren und zu entfernen, indem sie durch sie iteriert werden.

Syntax

Array.von (Objekt, Karte, Wert)

In der oben gegebenen Syntax:

• “Objekt”Bezieht sich auf das Objekt, das in ein Array umgewandelt werden soll.
• “Karte”Entspricht der Kartenfunktion, die auf jedes Element zugeordnet werden muss.
• “Wert"Zeigt auf den Wert, der als" als "als" verwendet werden soll "Das”Für die Kartenfunktion.

dokumentieren.GetElements ByClassName (Klasse)

In der angegebenen Syntax:

• “Klasse”Repräsentiert den Klassennamen des Elements.

Beispiel
Gehen wir mit dem folgenden Beispiel weiter:

Entfernen Sie die Elemente

Klicken Sie hier, um Elemente zu entfernen

In den obigen Codezeilen:

• Ebenso schließen Sie die “ein

  ", und das "Elemente mit den gleichen Klassen.

• Erstellen Sie in ähnlicher Weise eine Schaltfläche mit einem “ONCLICK”Ereignisumleitungen zur Funktion REMETELEMENTS ().
• Definieren Sie im JavaScript -Code eine Funktion namens “REMETELEMENTS ()”.
• Wenden Sie in seiner Definition das an “Array.aus()" Und "GetElements byclassName ()Methoden in Kombination, um die abgerufenen Elemente gegen die angegebene Klasse in Form eines Arrays zurückzugeben.
• Danach anwenden Sie die “für jede()" Und "entfernen()Methoden, um die Elemente im vorherigen Schritt durchzusetzen und sie auf der Schaltfläche zu entfernen, jeweils.

Ausgang

Die obige Ausgabe bedeutet, dass die gewünschte Funktionalität erfüllt ist.

Abschluss

Der "für jede()" Und "entfernen()"Methoden kombiniert mit dem"QuerySelectorAll ()”Methode oder“Array.aus()" Und "GetElements byclassName ()Methoden können verwendet werden, um alle Elemente mit bestimmten Klassen mit JavaScript zu entfernen. Die ersteren Methoden können angewendet werden, um direkt auf die Elemente zuzugreifen. Die letzteren Methoden können in Kombination implementiert werden, um auf die Elemente nach der Klasse zuzugreifen, sie in Form eines Arrays zurückzugeben und sie durch Iterieren zu entfernen. In diesem Artikel wurde erläutert, wie alle Elemente mit einer bestimmten Klasse mit JavaScript entfernt werden können.