jQuery removeClass()

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.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *