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:
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!