javascript - remover - ¿Cómo eliminar todas las clases CSS usando jQuery?

jquery class

Question

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

Tanto jQuery como JavaScript en bruto funcionarán.

Answer 1

Me gusta usar js nativos 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 = '''';

formas jQuery

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

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

Answer 2

Dado que no todas las versiones de jQuery son iguales, puedes encontrar 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 en bruto y eliminar el atributo de clase por completo.

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

Answer 3

El metodo mas corto

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

Answer 4

Espera, no elimina la clase () por defecto para eliminar todas las clases si no se especifica nada específico? Asi que

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

lo hará por su cuenta ...

Answer 5

Heh, vino buscando una respuesta similar. Entonces me golpeó.

Eliminar clases específicas

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

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

Answer 6

Por supuesto.

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

Answer 7

Puedes intentarlo

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

Si tiene que acceder a ese elemento sin nombre de clase, por ejemplo, tiene que 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 clases en un generador html. Buena suerte.

Answer 8

Simplemente establezca el atributo className del elemento DOM real en '''' (nada).

$(''#item'')[0].className = ''''; // the real DOM element is at [0]

Edición: otras personas han dicho que solo llamar a removeClass funciona. removeClass esto con Google JQuery Playground: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... y funciona. Así que también puedes hacerlo de esta manera:

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

Answer 9

Tuve un problema similar. En mi caso, en elementos deshabilitados se aplicó esa clase aspNetDisabled y todos los controles deshabilitados tenían colores incorrectos. Entonces, usé jquery para eliminar esta clase en cada elemento / control que no uso 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");

}); 

Answer 10

Vamos a usar este ejemplo. Quizás 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 hace clic en 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");
    }
});

Answer 11

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>

Answer 12

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

Llamar a removeClass sin parámetros eliminará todas las clases del elemento.

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

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

Si no tuvieras jQuery, esta sería prácticamente tu única opción:

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

Answer 13

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

Ya no estará presente el atributo de clase en "olmo".