removeClass() jQuery: Como remover classes de elementos HTML
IONOS editorial team4 mins
A princípio, a biblioteca jQuery foi criada para simplificar a manipulação do DOM. Especificamente, ao fazer uso do método .removeClass() jQuery, você consegue acessar elementos e remover classes CSS com total facilidade.
O que é .removeClass() jQuery?
Com o método jQuery.removeClass(), você consegue remover uma ou mais classes CSS de um elemento selecionado, sem ter de alterar todo o valor do atributo de classe. Ao remover classes específicas, torna-se possível controlar interativamente o estilo e o comportamento de um site. Para adicionar classes, contudo, use o método jQuery.addClass(). Já ao aplicar jQuery.on(), você poderá definir manipuladores de eventos para eventos específicos, que acionam a remoção de classes CSS por meio do jQuery.removeClass(). Esse método também pode ser empregado com a mesma facilidade se você usa o jQuery no WordPress.
O webspace da IONOS disponibiliza espaço de memória sem anúncios para as suas aplicações web. Os pacotes também incluem domínios e endereços de e-mail personalizados para as necessidades do seu projeto.
Sintaxe e parâmetros do .removeClass() jQuery
O método jQuery.removeClass() segue a seguinte estrutura básica:
$(selector).removeClass(classname, function(index, currentclass))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 selecionado. O parâmetro index informa o índice do elemento atual, e currentclass especifica 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 iniciantes do nosso Digital Guide.
Otimize e aumente a eficiência dos seus processos de trabalho com a API da IONOS para desenvolvedores. Com ela, você pode criar uma chave de acesso segura para os seus projetos de hospedagem e gerenciar automaticamente os seus recursos.
Exemplos de uso do .removeClass() jQuery
Os exemplos de códigos que serão apresentados a seguir mostram três possibilidades de uso do método jQuery.removeClass().
jQuery.removeClass() sem parâmetros
<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>Ao inserir o método jQuery.removeClass() sem argumentos, você remove todas as classes do elemento correspondente. No exemplo acima, combinamos .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 específicas
Se você deseja remover classes específicas de uma só vez, basta indicar essas classes como uma cadeia de caracteres, separando-as por espaços:
$("h1").removeClass("highlight uppercase bold")Ao inserirmos removeClass("highlight uppercase bold"), comandamos 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");
});
});
});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 fornecemos como argumento para removeClass(), retorna o valor atual do atributo de classe do elemento. Assim, todas as classes CSS existentes são removidas do elemento <div>.
Com o Deploy Now da IONOS, você pode implantar suas aplicações web diretamente pelo GitHub. Configure e publique o seu projeto automaticamente e em poucos passos, e modifique o fluxo de trabalho a qualquer momento. Ainda, URLs de pré-visualização permitem que você execute testes automatizados e receba feedbacks em tempo real.