¿Cómo eliminar todas las clases CSS usando jQuery / JavaScript?

778

En lugar de llamar individualmente $("#item").removeClass()para cada clase que pueda tener un elemento, ¿hay una sola función a la que se pueda llamar que elimine todas las clases CSS del elemento dado?

Tanto jQuery como JavaScript sin formato funcionarán.

Haga clic en Upvote
fuente

Respuestas:

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

Llamar removeClasssin parámetros eliminará todas las clases del elemento.


También puede usar (pero no se recomienda necesariamente, la forma correcta es la anterior):

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

Si no tuviera jQuery, esta sería su única opción:

document.getElementById('item').className = '';
jimyi
fuente
77
¿No debería ser la attr()versión prop()ahora?
Mike
77
Llamar a removeClass () sin parámetros ya no parece funcionar en la versión 1.11.1
Vincent
1
@Vincent Parece un error introducido en jQuery ya que su documentación lo dice explícitamente: 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
Sí, también sospecho que es un error, y no por diseño. Mientras tanto, el siguiente JavaScript puro funciona bien. document.getElementById ("elemento"). removeAttribute ("clase");
Vincent
1
Hay un problema con jQuery UI 1.9. Si removeClass () no funcionó, use removeAttr ('class')
Milad
119

Espera, ¿no removeClass () predeterminado para eliminar todas las clases si no se especifica nada específico? Entonces

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

lo hará solo ...

da5id
fuente
3
sí: "Elimina todas o las clases especificadas del conjunto de elementos coincidentes".
da5id
55
Ahora está documentado correctamente: si no se especifican nombres de clase en el parámetro, se eliminarán todas las clases.
usuario
13

Por supuesto.

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

Je, vino a buscar una respuesta similar. Entonces me golpeó.

Eliminar clases específicas

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

Digamos si el elemento tiene class = "class another-class"

Shawn Rebelo
fuente
9

El metodo mas corto

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

Puedes probar

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

Si tiene que acceder a ese elemento sin nombre de clase, por ejemplo, debe agregar un nuevo nombre de clase, puede hacerlo:

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

Utilizo esa función en mi proyecto para eliminar y agregar clase en un generador de HTML. Buena suerte.

Alessandro tonto Ciak DAnton
fuente
4
$('#elm').removeAttr('class');

ya no estará el attr de clase en "olmo".

uihelp
fuente
Esto es lo que funcionó para mí. removeClass();no funciono para mi
rodillas
3

Me gusta usar nativos js hacer esto, lo creas o no!

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 = '';

jQuery maneras

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

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

xgqfrms
fuente
2

Como no todas las versiones de jQuery se crean de la misma manera, es posible que se encuentre con el mismo problema que hice, lo que significa llamar a $ ("# item"). RemoveClass (); en realidad no elimina la clase. (Probablemente un error)

Un método más confiable es simplemente usar JavaScript sin procesar y eliminar el atributo de clase por completo.

document.getElementById("item").removeAttribute("class");
Vincent
fuente
1

prueba con removeClass

Por ejemplo :

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>

x-rw
fuente
1

Usemos este ejemplo. Tal vez desee que el usuario de su sitio web sepa que un campo es válido o necesita atención cambiando el color de fondo del campo. Si el usuario presiona restablecer, su código solo debe restablecer los campos que tienen datos y no molestarse en recorrer todos los demás campos de su página.

Este filtro jQuery eliminará la clase "highlightCriteria" solo para los campos de entrada o selección que tengan esta clase.

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

Tuve un problema similar. En mi caso, se aplicaron elementos deshabilitados que la clase aspNetDisabled y todos los controles deshabilitados tenían colores incorrectos. Entonces, utilicé jquery para eliminar esta clase en cada elemento / control que no usaré y todo funciona y se ve muy bien ahora.

Este es mi código para eliminar la clase aspNetDisabled:

$(document).ready(function () {

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

}); 
Nezir
fuente