In origine jQuery è nato per sem­pli­fi­ca­re la ma­ni­po­la­zio­ne DOM. jQuery.re­mo­ve­Class() ti permette di accedere agli elementi e ri­muo­ver­ne le classi CSS fa­cil­men­te.

Cos’è il metodo jQuery.re­mo­ve­Class()?

Con jQuery.re­mo­ve­Class() puoi eliminare una o più classi CSS da un elemento se­le­zio­na­to senza dover mo­di­fi­ca­re l’intero valore dell’attributo della classe. Puoi quindi anche rimuovere de­ter­mi­na­te classi in modo mirato per per­met­te­re il controllo in­te­rat­ti­vo dello stile e del com­por­ta­men­to del sito web. Per ag­giun­ge­re classi si usa invece jQuery.addClass(). Mediante jQuery.on() è anche possibile definire gestori per de­ter­mi­na­ti eventi, che attivano la rimozione di classi CSS con jQuery.re­mo­ve­Class(). Il metodo è valido anche quando si usa jQuery su WordPress.

Consiglio

Lo spazio web di IONOS ti offre la pos­si­bi­li­tà di no­leg­gia­re spazio di ar­chi­via­zio­ne senza pub­bli­ci­tà per le tue ap­pli­ca­zio­ni web. IONOS ti fornisce domini e indirizzi e-mail su misura per le tue esigenze.

Come si pre­sen­ta­no la sintassi e i parametri di jQuery.re­mo­ve­Class()?

Il metodo jQuery.re­mo­ve­Class() è strut­tu­ra­to come segue:

$(selector).removeClass(classname, function(index, currentclass))
jQuery

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 se­le­zio­na­ti 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 ri­muo­ven­do.

Se vuoi saperne di più sui selettori e la sintassi di jQuery ti con­si­glia­mo il nostro tutorial su jQuery.

Consiglio

Ottimizza i tuoi processi di lavoro e aumenta la tua ef­fi­cien­za con l’API per svi­lup­pa­to­ri di IONOS. Per i tuoi progetti di hosting puoi anche creare una chiave di accesso sicura con cui gestire au­to­ma­ti­ca­men­te le tue risorse.

Esempi di ap­pli­ca­zio­ne di jQuery.re­mo­ve­Class()

Di seguito ti pre­sen­tia­mo tre diverse pos­si­bi­li­tà di impiego del metodo jQuery.re­mo­ve­Class():

jQuery.re­mo­ve­Class() 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>
html

Chiamando jQuery.re­mo­ve­Class() senza argomenti puoi rimuovere tutte le classi del relativo elemento. In questo esempio abbiamo collegato re­mo­ve­Class() 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 de­ter­mi­na­te classi

Per eliminare una lista par­ti­co­la­re di classi basta indicarla se­pa­ra­ta­men­te come stringa con spazi:

$("h1").removeClass("highlight uppercase bold")
jQuery

Con l’espres­sio­ne removeClass("highlight uppercase bold") ri­muo­via­mo 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");
        });
    });
});
jQuery

Qui uti­liz­zia­mo la funzione jQuery.re­mo­ve­Class() 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(), re­sti­tui­sce il valore corrente dell’attributo della classe dell’elemento. Tutte le classi CSS presenti vengono rimosse dall’elemento <div>.

Consiglio

Con Deploy Now di IONOS puoi di­stri­bui­re ap­pli­ca­zio­ni web di­ret­ta­men­te tramite GitHub. Il tuo progetto viene messo a di­spo­si­zio­ne au­to­ma­ti­ca­men­te in pochi passaggi, con la pos­si­bi­li­tà di mo­di­fi­ca­re il flusso di lavoro delle azioni in qualsiasi momento. Con l’URL di anteprima per lo staging au­to­ma­ti­co puoi contare su un veloce riscontro.

Vai al menu prin­ci­pa­le