19.01.2025

Como Remover uma Classe CSS de um Elemento Usando JavaScript

Resposta Rápida

Se você precisa remover uma classe de um elemento, o comando element.classList.remove("NomeDaClasse") em JavaScript é a solução mais adequada:

document.querySelector('.encrenca').classList.remove('classeIndesejada');

Assim, o elemento <div class="encrenca classeIndesejada"></div> se transforma em <div class="encrenca"></div>. Este método é útil para alterar estilos rapidamente.

Trabalhando com Múltiplas Classes

Se um elemento tiver múltiplas classes e você precisar remover apenas algumas delas, classList é bem útil:

let diva = document.getElementById('divaElement');
diva.classList.remove('mudancaFantasia', 'foraDeTom');

Após a aplicação deste código, <div id="divaElement" class="mudancaFantasia foraDeTom bis"></div> se torna <div id="divaElement" class="bis"></div>.

Considerando Antigos e Novos

Navegadores mais antigos podem não oferecer suporte a classList. Para IE9 e similares, use o className mais primitivo, porém confiável:

var diva = document.getElementById('divaID');
diva.className = diva.className.replace(/\bmudancaFantasia\b/, '');

Aqui, uma expressão regular é usada para localizar e remover o nome da classe sem afetar nomes semelhantes.

Elegância no Código

Para aumentar a legibilidade e adicionar elegância ao código, você pode estender o protótipo de HTMLElement com seu método para remover classes:

// Tornando o código mais elegante
HTMLElement.prototype.removeClass = function(famosa) {
  var novela = new RegExp('(\\s|^)' + famosa + '(\\s|$)');
  this.className = this.className.replace(novela, ' ').trim();
};

Agora, ao chamar diva.removeClass('mudancaFantasia'), você pode facilmente remover a classe indesejada.

Visualização

Imagine que remover uma classe CSS de um elemento HTML é como trocar de roupa para um rockstar:

Rockstar em plena vestimenta (🎸🕶️): <div class="rockstar jaquetaDeCouro"></div>

Ação do JavaScript: A transformação tão aguardada acontece instantaneamente!

document.querySelector('.rockstar').classList.remove('jaquetaDeCouro');

Agora, o rockstar fica assim (🎸👔): <div class="rockstar"></div>

A jaqueta de couro foi removida, mas o espírito rock ainda permanece!

Suporte para Fãs Dedilhadores

Em um mundo em constante mudança, é importante ter estratégias alternativas. A popularidade de classList não elimina a necessidade de compatibilidade:

function encontroDeFas(elem, grupo) {
  if (elem.classList) {
    // Alimentando os perfeccionistas!
    elem.classList.remove(grupo);
  } else {
    // Levando em conta usuários com navegadores antigos
    elem.className = elem.className.replace(new RegExp('(?:^|\\s)' + grupo + '(?:\\s|$)'), ' ').trim();
  }
}

Esta função aborda de forma confiável a questão da remoção de classes de forma idêntica em todos os navegadores.

Trabalhando com Classes em Estilo de Lista

Se usar classList não for adequado e expressões regulares parecerem complexas, você pode converter a string className em um array, e em seguida filtrar a classe indesejada:

function mudancaDeEstilo(elem, diva) {
  let membrosElenco = elem.className.split(' ');
  let personagensDeApoio = membrosElenco.filter(function(personagem) { return personagem !== diva; });
  elem.className = personagensDeApoio.join(' ');
}

Essa abordagem permite a remoção seletiva de classes sem problemas.

Criando uma Atmosfera Exclusiva

Uma vez que tudo o que é desnecessário foi removido, é hora de estender o tapete vermelho adicionando novas classes:

document.querySelector('.encrenca').classList.add('classeDesejada');

A classe é adicionada de forma concisa, enquanto o conjunto atual permanece inalterado.

Recursos Úteis

1. Elemento: propriedade classList - Web APIs | MDN — Guia autoritativo sobre o uso da API classList.
2. Como Remover um Nome de Classe — Guia prático sobre remoção de classes usando JavaScript.
3. Classes — Descrição detalhada de como trabalhar com classes HTML em JavaScript.
4. html - Remova a classe CSS de um elemento com JavaScript (sem jQuery) - Stack Overflow — Extensa fórum da comunidade de desenvolvedores discutindo vários métodos.
5. Os Fundamentos da Manipulação do DOM em JavaScript Puro (Sem jQuery) — SitePoint — Exploração aprofundada da manipulação do DOM sem jQuery, incluindo classList.
6. Como Modificar Classes CSS em JavaScript | DigitalOcean — Material introdutório sobre métodos classList em JavaScript.

Video

Navigation