jQuery.removeClass(): per rimuovere classi da elementi HTML
La redazione di IONOS3 mins
In origine jQuery è nato per semplificare la manipolazione DOM. jQuery.removeClass() ti permette di accedere agli elementi e rimuoverne le classi CSS facilmente.
Cos’è il metodo jQuery.removeClass()?
Con jQuery.removeClass() puoi eliminare una o più classi CSS da un elemento selezionato senza dover modificare l’intero valore dell’attributo della classe. Puoi quindi anche rimuovere determinate classi in modo mirato per permettere il controllo interattivo dello stile e del comportamento del sito web. Per aggiungere classi si usa invece jQuery.addClass(). Mediante jQuery.on() è anche possibile definire gestori per determinati eventi, che attivano la rimozione di classi CSS con jQuery.removeClass(). Il metodo è valido anche quando si usa jQuery su WordPress.
Lo spazio web di IONOS ti offre la possibilità di noleggiare spazio di archiviazione senza pubblicità per le tue applicazioni web. IONOS ti fornisce domini e indirizzi e-mail su misura per le tue esigenze.
Come si presentano la sintassi e i parametri di jQuery.removeClass()?
Il metodo jQuery.removeClass() è strutturato come segue:
$(selector).removeClass(classname, function(index, currentclass))In classname si indica il nome della classe o delle classi da rimuovere. function(index, currentclass) è la funzione che viene eseguita per ciascuno degli elementi selezionati durante la rimozione della classe. Con i parametri index si indica l’indice dell’elemento corrente e con currentclass il valore attuale della classe CSS che si sta rimuovendo.
Se vuoi saperne di più sui selettori e la sintassi di jQuery ti consigliamo il nostro tutorial su jQuery.
Ottimizza i tuoi processi di lavoro e aumenta la tua efficienza con l’API per sviluppatori di IONOS. Per i tuoi progetti di hosting puoi anche creare una chiave di accesso sicura con cui gestire automaticamente le tue risorse.
Esempi di applicazione di jQuery.removeClass()
Di seguito ti presentiamo tre diverse possibilità di impiego del metodo jQuery.removeClass():
jQuery.removeClass() senza parametri
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").removeClass();
});
});
</script>
</head>
<body>
<p class="big-font blue">Example text</p>
<button id="btn">Click to remove classes</button>
</body>
</html>Chiamando jQuery.removeClass() senza argomenti puoi rimuovere tutte le classi del relativo elemento. In questo esempio abbiamo collegato removeClass() alla funzione jQuery.click(). Facendo clic sul pulsante con l’ID btn, le due classi big-font e blue vengono rimosse dall’elemento <p>.
Rimuovere determinate classi
Per eliminare una lista particolare di classi basta indicarla separatamente come stringa con spazi:
$("h1").removeClass("highlight uppercase bold")Con l’espressione removeClass("highlight uppercase bold") rimuoviamo le tre classi highlight, uppercase e bold dall’elemento <h1>.
Passare una funzione come argomento
$(document).ready(function() {
$("#btn").click(function() {
$("div#container").removeClass(function() {
return $(this).attr("class");
});
});
});Qui utilizziamo la funzione jQuery.removeClass() per rimuovere tutte le classi CSS da un elemento <div> con l’ID container quando viene premuto il pulsante con l’ID btn. La funzione .attr("class"), che passiamo a removeClass(), restituisce il valore corrente dell’attributo della classe dell’elemento. Tutte le classi CSS presenti vengono rimosse dall’elemento <div>.
Con Deploy Now di IONOS puoi distribuire applicazioni web direttamente tramite GitHub. Il tuo progetto viene messo a disposizione automaticamente in pochi passaggi, con la possibilità di modificare il flusso di lavoro delle azioni in qualsiasi momento. Con l’URL di anteprima per lo staging automatico puoi contare su un veloce riscontro.
