A princípio, a bi­bli­o­teca jQuery foi criada para sim­pli­fi­car a ma­ni­pu­la­ção do DOM. Es­pe­ci­fi­ca­mente, ao fazer uso do método .re­mo­ve­Class() jQuery, você consegue acessar elementos e remover classes CSS com total fa­ci­li­dade.

O que é .re­mo­ve­Class() jQuery?

Com o método jQuery.re­mo­ve­Class(), você consegue remover uma ou mais classes CSS de um elemento se­le­ci­o­nado, sem ter de alterar todo o valor do atributo de classe. Ao remover classes es­pe­cí­fi­cas, torna-se possível controlar in­te­ra­ti­va­mente o estilo e o com­por­ta­mento de um site. Para adicionar classes, contudo, use o método jQuery.addClass(). Já ao aplicar jQuery.on(), você poderá definir ma­ni­pu­la­do­res de eventos para eventos es­pe­cí­fi­cos, que acionam a remoção de classes CSS por meio do jQuery.re­mo­ve­Class(). Esse método também pode ser empregado com a mesma fa­ci­li­dade se você usa o jQuery no WordPress.

Dica

O webspace da IONOS dis­po­ni­bi­liza espaço de memória sem anúncios para as suas apli­ca­ções web. Os pacotes também incluem domínios e endereços de e-mail per­so­na­li­za­dos para as ne­ces­si­da­des do seu projeto.

Sintaxe e pa­râ­me­tros do .re­mo­ve­Class() jQuery

O método jQuery.re­mo­ve­Class() segue a seguinte estrutura básica:

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

Aqui, classname indica o nome da(s) classe(s) a serem removida(s). Por sua vez, function(index, currentclass) é a função executada durante a remoção da classe para cada elemento se­le­ci­o­nado. O parâmetro index informa o índice do elemento atual, e currentclass es­pe­ci­fica o valor atual da classe CSS a ser removida.

Se você tem interesse em aprender mais sobre seletores e sintaxes em jQuery, não deixe de acessar o tutorial de jQuery para ini­ci­an­tes do nosso Digital Guide.

Dica

Otimize e aumente a efi­ci­ên­cia dos seus processos de trabalho com a API da IONOS para de­sen­vol­ve­do­res. Com ela, você pode criar uma chave de acesso segura para os seus projetos de hos­pe­da­gem e gerenciar au­to­ma­ti­ca­mente os seus recursos.

Exemplos de uso do .re­mo­ve­Class() jQuery

Os exemplos de códigos que serão apre­sen­ta­dos a seguir mostram três pos­si­bi­li­da­des de uso do método jQuery.re­mo­ve­Class().

jQuery.re­mo­ve­Class() sem pa­râ­me­tros

<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

Ao inserir o método jQuery.re­mo­ve­Class() sem ar­gu­men­tos, você remove todas as classes do elemento cor­res­pon­dente. No exemplo acima, com­bi­na­mos .removeClass() com a função jQuery.click(). Assim, quando se clica no botão com o ID btn, as classes big-font e blue são removidas do elemento <p>.

Remover classes es­pe­cí­fi­cas

Se você deseja remover classes es­pe­cí­fi­cas de uma só vez, basta indicar essas classes como uma cadeia de ca­rac­te­res, separando-as por espaços:

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

Ao in­se­rir­mos removeClass("highlight uppercase bold"), co­man­da­mos a remoção das classes highlight, uppercase e bold do elemento <h1>.

Usar função como argumento

$(document).ready(function() {
    $("#btn").click(function() {
        $("div#container").removeClass(function() {
            return $(this).attr("class");
        });
    });
});
jQuery

Acima, usamos a função .removeClass() para remover todas as classes CSS do elemento <div> com o ID container, quando se clica no botão com o ID btn. A função .attr("class"), que for­ne­ce­mos como argumento para removeClass(), retorna o valor atual do atributo de classe do elemento. Assim, todas as classes CSS exis­ten­tes são removidas do elemento <div>.

Dica

Com o Deploy Now da IONOS, você pode implantar suas apli­ca­ções web di­re­ta­mente pelo GitHub. Configure e publique o seu projeto au­to­ma­ti­ca­mente e em poucos passos, e modifique o fluxo de trabalho a qualquer momento. Ainda, URLs de pré-vi­su­a­li­za­ção permitem que você execute testes au­to­ma­ti­za­dos e receba feedbacks em tempo real.

Ir para o menu principal