Come rimuovere un nome di classe da un elemento tramite JavaScript

Come siamo consapevoli del fatto che JavaScript è comunemente usato per manipolare gli elementi di una pagina HTML con l'aiuto dell'interfaccia del nodo DOM. Queste manipolazioni non possono solo cambiare lo stile o i dati all'interno degli elementi HTML, ma possono persino cambiare gli attributi degli elementi come i nomi delle classi. Cambiare o rimuovere un nome di classe da un elemento è un lavoro cruciale soprattutto quando si lavora con lo styling di animazione su elementi.

Per spostare un'animazione da un elemento a un altro elemento non si riscrive l'intero script di animazione degli altri elementi in quanto può aumentare il carico sul server piuttosto che scrivi lo script di animazione su nomi o ID delle classi e per spostare semplicemente modificare o Rimuovere il nome della classe o l'ID di un elemento HTML della pagina web.

Per rimuovere il nome della classe da un elemento utilizziamo il .classlist.rimuovere() funzione.

La sintassi è:

elemento.classlist.Rimuovi (nome di classe)

Impareremo come possiamo usare JavaScript per rimuovere un nome di classe da un elemento nella pagina web. Per questo, creeremo:

• Una pagina HTML di base con un elemento con un nome di classe che vogliamo rimuovere.
• Un pulsante che invocherà la funzione.
• La funzione collegata al pulsante rimuoverà effettivamente il nome della classe.
• Gli strumenti per sviluppatori del browser per verificare la rimozione del nome della classe.

Iniziamo.

Impostazione della pagina HTML

Creeremo un elemento con un elenco di vari nomi di classe. Questo avrà anche un ID specifico per creare un riferimento a questo Quando stiamo usando JavaScript. Possiamo crearlo usando le seguenti righe:

Questo è un div con più classi

Abbiamo un div con le classi "Google Yahoo Bing Linuxhint" e l'ID è "LH-TUTS. Abbiamo aggiunto la proprietà di stile per renderla visibile. Eseguiamo il file HTML per ottenere il seguente output:

Ora che abbiamo una pagina HTML di base, creiamo un pulsante che rimuoverà una classe dal elemento.

Lo facciamo usando le seguenti righe di codice:

Rimuovere la classe

La nostra pagina web sembrerà così:

Creazione del codice JavaScript per rimuovere la classe dall'elemento

Ora dobbiamo scrivere una funzione "removeClass ()" nello script. Quindi creiamo un tag e scriviamo una funzione che rimuoverà la classe "Google" dall'elenco delle classi con le seguenti righe:

Questa funzione dovrebbe rimuovere la classe "Google" dall'elenco delle classi del elemento. Proviamolo e verifichiamo l'output con gli strumenti per sviluppatori del browser.

Come puoi vedere, all'inizio il div ha 4 classi diverse. Ma non appena premiamo il pulsante, il nome della classe "Google" viene rimosso dall'elenco dei nomi delle classi.

Possiamo anche rimuovere più classi contemporaneamente, per questo utilizziamo la linea:

div.classlist.Rimuovi ("Google", "Yahoo", "Bing");

Il frammento di funzione diventerebbe:

Ora, se esaminiamo l'output con gli strumenti per sviluppatori del browser, otteniamo:

Come puoi vedere, siamo stati in grado di rimuovere anche più classi contemporaneamente.

Approccio alternativo

C'è un'altra cosa, stavamo usando il documento.getElementById () Per creare un riferimento all'elemento, possiamo persino usare il documento.getElementByClassName (), Ma per questo dovremo cambiare la nostra sceneggiatura. Poiché non possiamo fare riferimento a un elemento usando il suo nome di classe e quindi eliminare un nome di classe mantenendo un riferimento all'elemento. Questo perché il nome di classe è un "Nodelist dal vivo".

Usare documento.getElementsByClassName () La nostra funzione diventa:

funzione removeClass ()
Div = documento.getElementsByClassName ("Google Yahoo Bing LinuxHint");
mentre (div.lunghezza)
Div [0].classlist.rimuovere ("yahoo", "bing");

Dato che è un nodelist in diretta, prendiamo il primo elemento nell'elenco e rimuoviamo il nome della classe. Continuiamo a ripeterlo fino a quando il nodelist è vuoto.

L'output è come:

Questo è tutto per la rimozione di un nome di classe da un elemento usando JavaScript.

Conclusione

JavaScript può essere utilizzato per rimuovere un nome di classe da un elemento HTML su una pagina web con l'aiuto del .classlist.rimuovere(). Può anche essere utilizzato per rimuovere più classi dall'elenco delle classi di un elemento. Per mostrarlo, abbiamo creato un HTML di base con a div elemento su di esso. Successivamente, abbiamo codificato uno script per rimuovere la classe da quell'elemento. Abbiamo esaminato l'output usando gli strumenti per sviluppatori del browser e abbiamo persino provato un modo alternativo di svolgere lo stesso compito.