jQuery removeClass(), remove class, rimuovere una classe

jQuery removeClass() method permette di rimuovere una classe (remove class) da un elemento selezionato.

La sintassi è dunque questa:

.removeClass (nome_classe, funzione (index, classe_corrente))

Dove nome_classe e funzione hanno le stesse caratteristiche del metodo addClass(), che abbiamo studiato nella lezione precedente: addClass().

Esempio di utilizzo di jQuery removeClass()

Analizziamo un primo esempio di utilizzo del metodo removeClass().

Coding Creativo. Primo paragrafo

Blog sul coding. Secondo paragrafo.

Per realizzare l’esempio inseriamo due paragrafi e un pulsante:

<p class="paragrafo" id="par1">Coding Creativo. Primo paragrafo</p>
<p class="paragrafo2" id="par2">Blog sul coding. Secondo paragrafo.</p>
<button id="rimuovi">Rimuoviamo la classe al secondo paragrafo</button>

Il secondo paragrafo ha la classe=”paragrafo2″ che è quella che vogliamo cancellare. Quindi vado a creare nel foglio di stile la classe di riferimento. Dò un colore al testo, allo sfondo e imposto anche il padding. Posso creare anche a titolo d’esempio un foglio di stile interno.

<style type="text/css">
.paragrafo {
  color: #00ff00;
  background:#333333;
  padding:10px;
}
.paragrafo2 {
  color: #ffff00;
  background:#cccccc;
  padding:10px;
}
</style>

Dopo inserisco la libreria jQuery:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Poi rimuovo la classe al paragrafo con id=”par2″ utilizzando il metodo removeClass().

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#par2").removeClass("paragrafo2");
  });
});
</script>

Secondo esempio di utilizzo di removeClass()

Il metodo removeClass() può essere utilizzato anche insieme ad addClass().

Vediamo un esempio in cui rimuovo una classe e ne associo un’altra.

Coding Creativo. Primo paragrafo

Blog sul coding. Secondo paragrafo.

In questo secondo esempio dunque ho dato la formattazione del primo paragrafo anche al secondo dopo aver premuto sul pulsante, cancellando quella presente.

Per realizzare l’esempio basta modificare l’esercizio precedente impostando:

$(“#par2”).removeClass(“paragrafo2”).addClass(“paragrafo”);

Terzo esempio d’uso del metodo removeClass()

Se provate a cliccare sul pulsante, vedrete cambiare i colori di alcune voci dell’elenco puntato. In particolare quelli per cui l’indice diviso due dà resto zero, cioè per gli indici di posto pari, sarà rimossa la classe lista e quindi assumeranno il colore di default.

Scratch
Algobuild
Linguaggio C
JQuery
HTML
CSS

Per realizzare questo esempio creiamo il nostro elenco puntato e dopo inseriamo il pulsante sotto. Ad esempio:

<ul>
  <li class="lista">Scratch</li>
  <li class="lista">Algobuild</li>
  <li class="lista">Linguaggio C</li>
  <li class="lista">JQuery</li>
  <li class="lista">HTML</li>
  <li class="lista">CSS</li>
</ul>
<button id="list">Cambio elenco</button>

Inseriamo poi nel foglio di stile la formattazione della lista:

<style type="text/css">
.lista {
  color: #98734e;
}
</style>

Aggiungiamo poi al solito la libreria JQuery ed infine il nostro semplicissimo script.

<script type="text/javascript">
$(document).ready(function(){
  $("#list").click(function(){
    $(".lista").removeClass(function(n) {
	  if (n%2==0) 
	       return "lista";
    });
  });
});
</script>

Potevamo ad esempio cambiare solo la prima voce dell’elenco impostando n==0.

Chiaramente questi sono solo dei semplicissimi esempi per imparare ad utilizzare jQuery removeClass() method.

Lezione precedente: jQuery addClass()

Lezione successiva: jQuery attr() method