Eliminar todas las clases que comienzan con una determinada cadena

Question

tengo un div con id="a" que puede tener cualquier número de clases adjuntas, de varios grupos.Cada grupo tiene un prefijo específico.En javascript, no sé qué clase del grupo está en el div.Quiero poder borrar todas las clases con un prefijo determinado y luego agregar una nueva.Si quiero eliminar todas las clases que comienzan con "bg", ¿cómo lo hago?Algo como esto, pero que realmente funciona:

$("#a").removeClass("bg*");

Answer 1

Con jQuery, el elemento DOM real está en el índice cero, esto debería funcionar

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Answer 2

Una expresión regular que se divide en el límite de la palabra \b no es la mejor solución para esto:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

o como un mixin jQuery:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

Actualización de ES6 2018:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Answer 3

He escrito un sencillo Complemento jQuery - alterClass, eso elimina la clase comodín.Opcionalmente también agregará clases.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

Answer 4

No necesitas ningún código específico de jQuery para manejar esto.Simplemente use una RegExp para reemplazarlos:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

Puede modificar esto para admitir cualquier prefijo, pero el método más rápido es el anterior, ya que RegExp se compilará solo una vez:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

Answer 5

Usando 2da firma de $.fn.removeClass :

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

Answer 6

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html dice:

...y .removeClass() eliminaría todas las clases...

Esto funciona para mi ;)

salud

Answer 7

Estaba buscando una solución para exactamente el mismo problema.Para eliminar todas las clases que comienzan con el prefijo "fontid_" Después de leer este artículo, escribí un pequeño complemento que estoy usando ahora.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

Uso:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

Answer 8

Un enfoque que usaría usando construcciones jQuery simples y funciones de manejo de matrices es declarar una función que toma la identificación del control y el prefijo de la clase y elimina todas las clases.Se adjunta el código:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

Ahora esta función se puede llamar desde cualquier lugar, haciendo clic en un botón o desde el código:

removeclasses("a","bg");

Answer 9

Sé que es una vieja pregunta, pero descubrí una nueva solución y quiero saber si tiene desventajas.

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

Answer 10

La respuesta de Prestaul fue útil, pero no funcionó del todo para mí.La forma jQuery de seleccionar un objeto por identificación no funcionó.tuve que usar

document.getElementById("a").className

en lugar de

$("#a").className

Answer 11

También uso guión'-' y dígitos para el nombre de la clase.Entonces mi versión incluye '\d-'

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

Answer 12

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

Answer 13

En una línea...Elimina todas las clases que coinciden con una expresión regular. algunaRegExp

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Answer 14

Para navegadores modernos:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

Answer 15

$("#element").removeAttr("class").addClass("yourClass");