¿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.

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

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 ...


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

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"


9

El metodo mas corto

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

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.


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

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


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");


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");

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>


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");
    }
});

-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");

}); 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.