Rimuovere tutti gli elementi con classe specifica usando JavaScript

Durante l'aggiornamento di una pagina Web o del sito, ci sono alcuni elementi associati alle funzioni che devono essere rimosse all'istante. Ad esempio, omettere una particolare funzionalità (con più effetti) da una pagina Web sul clic del pulsante. In tali situazioni, la rimozione di tutti gli elementi con una classe specifica utilizzando JavaScript è una funzionalità molto utile per creare un tempo intuitivo e risparmio di un sito Web.

Questo blog illustrerà gli approcci per rimuovere tutti gli elementi con classi specifiche usando JavaScript.

Come rimuovere tutti gli elementi con una classe specifica usando JavaScript?

Per rimuovere tutti gli elementi con una classe specifica usando JavaScript, implementa i seguenti approcci in combinazione con "per ciascuno()" E "rimuovere()"Metodi:

• "QuerySelectorAll ()" metodo.
• "Vettore.da()" E "getElementsByClassName ()"Metodi.

Illustriamo i metodi dichiarati uno per uno!

Approccio 1: rimuovere tutti gli elementi con classe specifica in JavaScript usando il metodo QuerySelectorall ()

IL "per ciascuno()"Il metodo applica una funzione per ciascun elemento contenuto in un array. IL "rimuovere()"Il metodo omette un elemento dal documento. Mentre il "QuerySelectorAll ()"Il metodo prende tutti gli elementi che corrispondono a un selettore / i CSS e fornisce un elenco di nodi in cambio. Questi metodi possono essere applicati in combinazione per recuperare vari elementi con classi identiche, iterare attraverso ciascun elemento e rimuoverli al clic del pulsante.

Sintassi

vettore.foreach (funzione (corrente, indice, array), questo)

Nella sintassi sopra data:

• funzione: È la funzione che deve essere eseguita per ogni elemento in un array.
• attuale: Questo parametro indica il valore dell'array corrente.
• indice: Indica l'indice dell'elemento corrente.
• vettore: Si riferisce all'array corrente.
• Questo: Corrisponde al valore che viene passato alla funzione.

documento.QuerySelectorAll (selettori)

Nella sintassi data:

• "selettori"Corrisponde a uno o più di un selettore CSS.

Esempio
Passiamo attraverso il seguente esempio:

Questa è un'immagine

Fare clic per rimuovere gli elementi

Applicare i seguenti passaggi nello snippet di codice sopra:

• Nel codice HTML, il "

  " E ""Gli elementi, hanno rispettivamente le stesse classi.

• Inoltre, crea un pulsante con un "al clic"Evento che invoca la funzione Rimuovi Elements ().
• Ora, nel codice JS, dichiara una funzione chiamata "RimuoviElement ()".
• Nella sua definizione, applica il "QuerySelectorAll ()"Metodo e indicare la classe specificata contro gli elementi indicati nel primo passaggio.
• Dopodiché, invoca il "per ciascuno()"Metodo per accedere a ciascun elemento tramite iterazione.
• Infine, applica il “rimuovere()"Metodo per rimuovere gli elementi iterati nel passaggio precedente contro la classe recuperata.
• Ciò comporterà la rimozione di tutti gli elementi con la classe particolare sul clic del pulsante.

Produzione

Nell'output sopra, si può osservare che gli elementi visibili sul modello a oggetto del documento vengono rimossi al clic del pulsante.

Approccio 2: rimuovere tutti gli elementi con classe specifica in JavaScript usando Array.Da () e getElementsByClassName () Metodi

IL "Vettore.da()"Il metodo restituisce un array da un oggetto con la lunghezza dell'array come parametro. IL "getElementsByClassName ()"Il metodo fornisce una raccolta di un elemento con un nome di classe specificato. Questi metodi possono essere combinati per accedere agli elementi per classe e restituirli e rimuoverli attraverso di loro.

Sintassi

Vettore.da (oggetto, mappa, valore)

Nella sintassi sopra data:

• "oggetto"Si riferisce all'oggetto da convertire in un array.
• "carta geografica"Corrisponde alla funzione mappa che deve essere mappata su ciascun elemento.
• "valore"Indica il valore da utilizzare come"Questo"Per la funzione mappa.

documento.getElementsByClassName (classe)

Nella sintassi data:

• "classe"Rappresenta il nome della classe dell'elemento.

Esempio
Passiamo al seguente esempio:

Rimuovere gli elementi

Fare clic per rimuovere gli elementi

Nelle righe di codice sopra:

• Allo stesso modo, includi il “

  ", e il ""Elementi che hanno le stesse classi.

• Allo stesso modo, crea un pulsante con un "al clic"Reindirizzamento degli eventi alla funzione Rimuovi Elements ().
• Nel codice JavaScript, definisce una funzione denominata "RimuoviElements ()".
• Nella sua definizione, applica il "Vettore.da()" E "getElementsByClassName ()"Metodi in combinazione per restituire gli elementi recuperati contro la classe specificata sotto forma di un array.
• Dopodiché, applica il "per ciascuno()" E "rimuovere()"Metodi per iterare attraverso gli elementi nel passaggio precedente e rimuoverli al clic del pulsante, rispettivamente.

Produzione

L'output sopra indica che la funzionalità desiderata è soddisfatta.

Conclusione

IL "per ciascuno()" E "rimuovere()Metodi combinati con il "QuerySelectorAll ()Metodo o "Vettore.da()" E "getElementsByClassName ()"I metodi possono essere utilizzati per rimuovere tutti gli elementi con classi specifiche usando JavaScript. I precedenti metodi possono essere applicati per accedere direttamente agli elementi per classe e rimuoverli ripetendoli, coinvolgendo così meno complessità del codice. Questi ultimi metodi possono essere implementati in combinazione per accedere agli elementi per classe, restituirli sotto forma di un array e rimuoverli attraverso di loro. Questo articolo ha spiegato come rimuovere tutti gli elementi con una classe specifica usando JavaScript.