Eliminar todas las clases que comienzan con una cierta cadena

Question

Tengo un div con id="a" que puede tener cualquier cantidad de clases asociadas, de varios grupos. Cada grupo tiene un prefijo específico. En el javascript, no sé qué clase del grupo está en el div. Quiero poder borrar todas las clases con un prefijo dado y luego agregar una nueva. Si quiero eliminar todas las clases que comienzan con "bg", ¿cómo hago eso? 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

No necesita ningún código específico de jQuery para manejar esto. Sólo tiene que utilizar una expresión regular para reemplazarlos:

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

Usted puede modificar esto para apoyar cualquier prefijo, pero el método más rápido está por encima de como la expresión regular será compilado una sola vez: Respuesta

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

Answer 3

de Prestaul era útil, pero no funcionó para mí. La forma jQuery de seleccionar un objeto por id no funcionó. Tuve que usar

document.getElementById("a").className 

en lugar de

$("#a").className 

Answer 4

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

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

Funciona para mí;)

aplausos

Answer 5

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

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

Answer 6

He escrito un simple plugin de jQuery, alterClass, que hace la extracción de clase comodín. añadiremos opcionalmente también clases: https://gist.github.com/1517285

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

Answer 7

Una división de expresiones regulares 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; 
}; 

Answer 8

Sé que es una vieja pregunta, pero encontré 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 9

(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 10

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

Answer 11

Usando 2nd signature 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 12

que estaba buscando solución para exactamente el mismo problema.Para eliminar todas las clases comenzando 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 13

Un enfoque me gustaría utilizar usando construcciones simples jQuery y funciones de manipulación de matriz, es declarar una función que toma id del control y el prefijo de la clase y eliminado todos clasificado . El código se adjunta:

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 bien, esta función puede ser llamada desde cualquier lugar, onclick del botón o del código:

removeclasses("a","bg"); 

Answer 14

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

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