Remova todas as classs que começam com uma determinada string

Eu tenho um div com id="a" que pode ter qualquer número de classs anexadas a ele, de vários grupos. Cada grupo tem um prefixo específico. No javascript, não sei qual class do grupo está na div. Eu quero ser capaz de limpar todas as classs com um determinado prefixo e, em seguida, adicionar um novo. Se eu quiser remover todas as classs que começam com “bg”, como faço isso? Algo parecido com isso, mas isso realmente funciona:

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

Com jQuery, o elemento DOM real está no índice zero, isso deve funcionar

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

Uma divisão em regex no limite de palavras \b não é a melhor solução para isso:

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

ou como um mixin jQuery:

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

Eu escrevi um plugin jQuery simples – alterClass , que faz a remoção de class curinga. Opcionalmente, você também adicionará classs.

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

Você não precisa de nenhum código específico do jQuery para lidar com isso. Basta usar um RegExp para substituí-los:

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

Você pode modificar isso para suportar qualquer prefixo, mas o método mais rápido está acima, já que o RegExp será compilado apenas uma vez:

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

Usando a 2ª assinatura de $.fn.removeClass :

 // Considering: var $el = $('
'); function makeRemoveClassHandler(regex) { return function (index, classs) { return classs.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' '); } } $el.removeClass(makeRemoveClassHandler(/^foo-/)); //> [
​]

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

… e .removeClass () removeria todas as classs …

Funciona para mim 😉

Felicidades

Eu estava procurando solução para exatamente o mesmo problema. Para remover todas as classs que começam com o prefixo “fontid_” Depois de ler este artigo eu escrevi um pequeno plugin que estou usando agora.

 (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-classs_'); 

Uma abordagem que eu usaria usando construções simples de jQuery e funções de manipulação de matriz, é declarar uma function que toma o id do controle e prefixo da class e exclui todas as classs. O código está anexado:

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

Agora esta function pode ser chamada de qualquer lugar, onclick do botão ou do código:

 removeclasss("a","bg"); 

Eu sei que é uma questão antiga, mas descobri nova solução e quero saber se tem desvantagens?

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

A resposta da Prestaul foi útil, mas não funcionou bem para mim. A maneira do jQuery para selecionar um object por id não funcionou. Eu tive que usar

 document.getElementById("a").className 

ao invés de

 $("#a").className 

Eu também uso hífen e dígitos para o nome da turma. Então minha versão inclui ‘\ d-‘

 $('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, ''); 
 (function($) { return this.each(function() { var classs = $(this).attr('class'); if(!classs || !regex) return false; var classArray = []; classs = classs.split(' '); for(var i=0, len=classs.length; i 

Em uma linha … Remove todas as classs que correspondem a uma expressão regular someRegExp

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