Como remover várias classes com classList

Neste artigo você vai aprender a como remover várias classes com classList, um método da linguagem JavaScript

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Em JavaScript, a propriedade classList de um elemento HTML permite acessar e manipular as classes que estão atribuídas a esse elemento.

É possível adicionar, remover e alternar classes individualmente com métodos específicos, mas também é possível remover várias classes de uma só vez usando um pouco de lógica e manipulação de strings.

Para remover várias classes de uma vez, primeiro precisamos identificar quais classes queremos remover.

Podemos fazer isso criando um array de strings que contenha os nomes das classes que queremos remover.

Por exemplo, se quisermos remover as classes “foo” e “bar” de um elemento, podemos criar um array como este:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

const classesToRemove = ['foo', 'bar'];

Em seguida, podemos usar o método forEach para iterar sobre o array e remover cada classe individualmente usando o método classList.remove().

O código pode ficar assim:

const element = document.getElementById('my-element');
const classesToRemove = ['foo', 'bar'];

classesToRemove.forEach(function(className) {
  element.classList.remove(className);
});

Este código irá remover as classes “foo” e “bar” do elemento com o ID “my-element”.

Note que classList.remove() remove apenas as classes especificadas e não afeta outras classes atribuídas ao elemento.

Também é possível usar outras técnicas de manipulação de arrays para criar o array de classes a serem removidas.

Por exemplo, se quisermos remover todas as classes que começam com o prefixo “bg-“, podemos usar o método filter() para criar um novo array contendo apenas as classes que correspondem a esse padrão:

var element = document.getElementById('my-element');
var classesToRemove = Array.from(element.classList).filter(function(className) {
  return className.startsWith('bg-');
});

classesToRemove.forEach(function(className) {
  element.classList.remove(className);
});

Este código criará um novo array contendo todas as classes que começam com “bg-” no elemento, e em seguida irá remover cada uma dessas classes do elemento.

Em resumo, a propriedade classList do JavaScript é uma maneira conveniente de manipular as classes atribuídas a um elemento HTML.

Ao criar um array de classes a serem removidas e, em seguida, iterar sobre esse array com o método forEach(), podemos remover várias classes de uma só vez.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Chegamos ao fim do artigo sobre como remover várias classes com classList!

A propriedade classList do JavaScript é uma ferramenta poderosa para acessar e manipular as classes de elementos HTML.

Remover várias classes de uma vez é uma tarefa comum que pode ser realizada de forma eficiente com o uso de um array e do método forEach().

Essa abordagem permite que sejam removidas várias classes simultaneamente, economizando tempo e código.

A capacidade de remover várias classes de uma só vez usando a propriedade classList torna a manipulação das classes dos elementos HTML mais fácil e eficiente.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Adicionar uma seção curta com subtítulo em pergunta, tipo ‘classList.remove aceita várias classes de uma vez?’, mostrando a forma mais direta antes de partir pro array:

Sim, e essa é a maneira mais simples de todas

O próprio classList.remove() aceita vários nomes de classe separados por vírgula, sem precisar de laço nenhum

Se liga:

const element = document.getElementById(‘my-element’); element.classList.remove(‘foo’, ‘bar’);

Pronto, as duas classes já foram removidas de uma vez só

Use essa forma quando você já sabe exatamente quais classes quer tirar

Quando os nomes são dinâmicos (vêm de um array), aí sim compensa o forEach que a gente vê logo abaixo

Dá pra deixar ainda mais enxuto com o operador spread

Se você já tem um array de classes, joga ele direto dentro do remove() usando as reticências (spread), sem forEach:

const element = document.getElementById(‘my-element’);

element.classList.remove(…classesToRemove);

O spread espalha cada item do array como um argumento separado, então é como se você tivesse escrito remove(‘foo’, ‘bar’) na mão

Menos código pro mesmo resultado, bem massa né?

Perguntas frequentes sobre classList.remove

Dá erro se a classe não existir no elemento?

Não, fica tranquilo

Se você mandar remover uma classe que o elemento não tem, o classList.remove() simplesmente ignora e segue a vida, sem quebrar nada

Posso remover todas as classes de uma vez?

Pode, é só limpar o className:

element.className = ”;

Isso zera todas as classes do elemento de uma vez

Qual a diferença entre classList.remove e className?

O classList mexe nas classes de forma individual e organizada (adicionar, remover, alternar)

Já o className trata tudo como uma string única, então é mais bruto pra manipular várias classes específicas