Como remover todas as classes CSS usando jQuery / JavaScript?


778

Em vez de chamar individualmente $("#item").removeClass()cada classe que um elemento possa ter, existe uma única função que pode ser chamada que remove todas as classes CSS do elemento fornecido?

O jQuery e o JavaScript bruto funcionarão.

Respostas:


1510
$("#item").removeClass();

Chamar removeClasssem parâmetros removerá todas as classes do item.


Você também pode usar (mas não é necessariamente recomendado, a maneira correta é a acima):

$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';

Se você não tivesse jQuery, essa seria sua única opção:

document.getElementById('item').className = '';

7
A attr()versão não deveria ser prop()agora?
18716 Mike

7
Chamando removeClass () sem parâmetros não parece mais trabalhar na versão 1.11.1
Vincent

1
@Vincent Parece um erro introduzido na jQuery desde a sua documentação afirma explicitamente este: If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed. api.jquery.com/removeclass
AtheistP3ace

Sim, também suspeito que seja um bug, e não por design. Enquanto isso, o JavaScript puro a seguir funciona bem. document.getElementById ("item"). removeAttribute ("class");
Vincent

1
Há um problema com a jQuery UI 1.9. Se removeClass () não funcionar, use removeAttr ('class')
Milad

119

Espere, não removeClass () padrão para remover todas as classes se nada específico for especificado? assim

$("#item").removeClass();

vai fazer isso por conta própria ...


3
yeah: "Remove todas ou as classes especificadas do conjunto de elementos correspondentes."
Da5id 15/09/09

5
Agora está documentado corretamente: Se nenhum nome de classe for especificado no parâmetro, todas as classes serão removidas.
usuário


13

Claro.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';

11

Heh, veio procurar uma resposta semelhante. Então isso me atingiu.

Remover classes específicas

$('.class').removeClass('class');

Diga se o elemento tem class = "class another-class"


9

O método mais curto

$('#item').removeAttr('class').attr('class', '');

5

Você pode apenas tentar

$(document).ready(function() {
   $('body').find('#item').removeClass();
});

Se você precisar acessar esse elemento sem o nome da classe, por exemplo, você precisará adicionar um novo nome de classe, poderá fazer isso:

$(document).ready(function() {
   $('body').find('#item').removeClass().addClass('class-name');
});

Eu uso essa função no meu projeto para remover e adicionar classes em um construtor de html. Boa sorte.


4
$('#elm').removeAttr('class');

o atributo de classe não estará mais presente no "olmo".


Isto é o que funcionou para mim. removeClass();não funcionou para mim.
Kneidels

3

Eu gosto de usar js nativos fazer isso, acredite ou não!

1

// remove all items all class  
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
    items[i].className = '';
}

2)

// only remove all class of first item
const item1 = document.querySelector('item');
item1.className = '';

maneiras jQuery

  1. $("#item").removeClass();

  2. $("#item").removeClass("class1 ... classn");


2

Como nem todas as versões do jQuery são criadas da mesma forma, você pode encontrar o mesmo problema que fiz, o que significa chamar $ ("# item"). RemoveClass (); realmente não remove a classe. (Provavelmente um bug)

Um método mais confiável é simplesmente usar JavaScript bruto e remover completamente o atributo de classe.

document.getElementById("item").removeAttribute("class");

1

tente com removeClass

Por exemplo :

var nameClass=document.getElementsByClassName("clase1");
console.log("after", nameClass[0]);
$(".clase1").removeClass();
var nameClass=document.getElementsByClassName("clase1");
console.log("before", nameClass[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clase1">I am Div with class="clase1"</div>


1

Vamos usar este exemplo. Talvez você queira que o usuário do seu site saiba que um campo é válido ou precise de atenção alterando a cor de fundo do campo. Se o usuário clicar em redefinir, seu código deverá redefinir apenas os campos que possuem dados e não se incomodar em percorrer todos os outros campos da página.

Esse filtro jQuery removerá a classe "destacarCritérios" apenas para os campos de entrada ou seleção que tiverem essa classe.

$form.find('input,select').filter(function () {
    if((!!this.value) && (!!this.name)) {
        $("#"+this.id).removeClass("highlightCriteria");
    }
});

-2

Eu tive um problema semelhante. No meu caso, em elementos desativados, foi aplicada a classe aspNetDisabled e todos os controles desativados com cores incorretas. Então, eu usei o jquery para remover essa classe em todos os elementos / controles que eu não faço e tudo funciona e parece ótimo agora.

Este é o meu código para remover a classe aspNetDisabled:

$(document).ready(function () {

    $("span").removeClass("aspNetDisabled");
    $("select").removeClass("aspNetDisabled");
    $("input").removeClass("aspNetDisabled");

}); 
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.