javascript - reemplazar - Eliminar todas las clases excepto una

eliminar span javascript

Question

Bueno, sé que con algunas acciones de jQuery, podemos agregar muchas clases a un div en particular:

<div class="cleanstate"></div>

Digamos que con algunos clics y otras cosas, el div recibe muchas clases

<div class="cleanstate bgred paddingleft allcaptions ..."></div>

Entonces, ¿cómo puedo eliminar todas las clases excepto una? La única idea que he surgido es con esto:

$(''#container div.cleanstate'').removeClass().addClass(''cleanstate'');

Mientras removeClass() mata todas las clases, el div se arruina, pero añadiendo justo después de eso addClass(''cleanstate'') vuelve a la normalidad. La otra solución es poner un atributo ID con las propiedades CSS básicas para que no se eliminen, lo que también mejora el rendimiento, pero solo quiero saber otra solución para deshacerme de todos, excepto ".cleanstate"

Pregunto esto porque, en el guión real, el div sufre varios cambios de clases.

Answer 1

¿Qué pasa si quieres mantener una o más de una clase y quieres clases excepto éstas? Estas soluciones no funcionarían si no quieres eliminar todas las clases. Agrega esa clase adicional nuevamente. El uso de attr y removeClass () restablece todas las clases en primera instancia y luego conecta esa clase perticular de nuevo. Si usa algo de animación en las clases que se restablecen nuevamente, fallará.

Si simplemente quieres eliminar todas las clases excepto alguna clase, entonces esto es para ti. Mi solución es para: removeAllExceptThese

Array.prototype.diff = function(a) {
            return this.filter(function(i) {return a.indexOf(i) < 0;});
        };
$.fn.removeClassesExceptThese = function(classList) { 
/* pass mutliple class name in array like ["first", "second"] */
            var $elem = $(this);

            if($elem.length > 0) {
                var existingClassList = $elem.attr("class").split('' '');
                var classListToRemove = existingClassList.diff(classList);
                $elem
                    .removeClass(classListToRemove.join(" "))
                    .addClass(classList.join(" "));
            }
            return $elem;
        };

Esto no restablecerá todas las clases, solo eliminará las necesarias.
Lo necesitaba en mi proyecto donde necesitaba eliminar solo las clases que no coinciden.

Puede usarlo $(".third").removeClassesExceptThese(["first", "second"]);

Answer 2

A veces es necesario mantener algunas de las clases debido a la animación CSS, porque tan pronto como elimine todas las clases, la animación puede no funcionar. En cambio, puedes mantener algunas clases y eliminar el resto así:

$(''#container div.cleanstate'').removeClass(''removethis removethat'').addClass(''cleanstate'');

Answer 3

Con un simple JavaScript antiguo, no JQuery:

document.getElementById("container").className = "cleanstate";

Answer 4

En lugar de hacerlo en 2 pasos, puede simplemente restablecer todo el valor de una vez con attr sobrescribiendo todos los valores de clase con la clase que desee:

jQuery(''#container div.cleanstate'').attr(''class'', ''cleanstate'');

Muestra: http://jsfiddle.net/jtmKK/1/

Answer 5

Use attr para establecer directamente el atributo de clase al valor específico que desee:

$(''#container div.cleanstate'').attr(''class'',''cleanstate'');

Answer 6

con respecto a robs answer y para y para completar, también puedes usar querySelector con vainilla

document.querySelector(''#container div.cleanstate'').className = "cleanstate";