blocks|key|344908|text|从jQuery+1.4开始，removeClass函数接受一个函数参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|344909|$("#hello").removeClass+(function+(index,+className)+{
++++return+(className.match+(/(%5E%7C\s)color-\S%2B/g)+%7C%7C+[]).join('+');
});|code-block|syntax|javascript|344910|现场示例：http://jsfiddle.net/xa9xS/1409/|344911|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/category/version/1.4/|1|http://api.jquery.com/removeClass/|2|http://jsfiddle.net/xa9xS/1409/^0|1|A|0|E|B|1|0|0|5|V|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

The <a href="http://api.jquery.com/removeClass/" rel="noreferrer">removeClass</a> function takes a function argument since <a href="http://api.jquery.com/category/version/1.4/" rel="noreferrer">jQuery 1.4</a>.

<pre><code>$("#hello").removeClass (function (index, className) {
 return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});
</code></pre>

Live example: <a href="http://jsfiddle.net/xa9xS/1409/" rel="noreferrer">http://jsfiddle.net/xa9xS/1409/</a>

blocks|key|3060652|text|$('div').attr('class',+function(i,+c){
++++return+c.replace(/(%5E%7C\s)color-\S%2B/g,+'');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3060653|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-js prettyprint-override"><code>$('div').attr('class', function(i, c){
 return c.replace(/(^|\s)color-\S+/g, '');
});
</code></pre>

blocks|key|345511|text|我已经写了一个插件，叫做alterClass+--使用通配符匹配删除元素类。可选地添加类：https://gist.github.com/1517285|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345512|$(+'#foo'+).alterClass(+'foo-*+bar-*',+'foobar'+)|code-block|syntax|javascript|345513|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/1517285^0|19|V|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I've written a plugin that does this called alterClass – Remove element classes with wildcard matching. Optionally add classes: <a href="https://gist.github.com/1517285" rel="noreferrer">https://gist.github.com/1517285</a> 

<pre><code>$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
</code></pre>

blocks|key|1652365|text|我将其概括为一个Jquery插件，该插件接受regex作为参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652366|咖啡：|1652367|$.fn.removeClassRegex+=+(regex)+->
++$(@).removeClass+(index,+classes)+->
++++classes.split(/\s%2B/).filter+(c)+->
++++++regex.test+c
++++.join+'+'|code-block|syntax|javascript|1652368|Javascript：|1652369|$.fn.removeClassRegex+=+function(regex)+{
++return+$(this).removeClass(function(index,+classes)+{
++++return+classes.split(/\s%2B/).filter(function(c)+{
++++++return+regex.test(c);
++++}).join('+');
++});
};|1652370|因此，在本例中，用法为(+Coffee和Javascript)：|1652371|$('#hello').removeClassRegex(/%5Ecolor-/)|1652372|请注意，我使用的是IE<9中不存在的Array.filter函数，您可以使用Underscore's+filter+function代替，或者使用Google作为polyfill，如this+WTFPL+one。|offset|length|style|CODE|1652373|entityMap|0|LINK|mutability|MUTABLE|url|http://underscorejs.org/#filter|1|https://gist.github.com/eliperelman/1031656^0|0|0|0|0|0|0|0|I|C|12|S|0|2J|E|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1D|8|@$S|1E|T|1F|U|V]]|9|@$S|1G|T|1H|1|1I]|$S|1J|T|1K|1|1L]]|A|$]]|$1|W|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

I've generalized this into a Jquery plugin which takes a regex as an argument.

Coffee:

<pre><code>$.fn.removeClassRegex = (regex) -&gt;
 $(@).removeClass (index, classes) -&gt;
 classes.split(/\s+/).filter (c) -&gt;
 regex.test c
 .join ' '
</code></pre>

Javascript:

<pre><code>$.fn.removeClassRegex = function(regex) {
 return $(this).removeClass(function(index, classes) {
 return classes.split(/\s+/).filter(function(c) {
 return regex.test(c);
 }).join(' ');
 });
};
</code></pre>

So, for this case, usage would be (both Coffee and Javascript):

<pre><code>$('#hello').removeClassRegex(/^color-/)
</code></pre>

Note that I'm using the <code>Array.filter</code> function which doesn't exist in IE&lt;9. You could use <a href="http://underscorejs.org/#filter" rel="noreferrer">Underscore's filter function</a> instead or Google for a polyfill like <a href="https://gist.github.com/eliperelman/1031656" rel="noreferrer">this WTFPL one</a>.

blocks|key|3061176|text|如果你想在其他地方使用它，我建议你扩展一下。这个对我来说工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3061177|+$.fn.removeClassStartingWith+=+function+(filter)+{
++++$(this).removeClass(function+(index,+className)+{
++++++++return+(className.match(new+RegExp("\\S*"+%2B+filter+%2B+"\\S*",+'g'))+%7C%7C+[]).join('+')
++++});
++++return+this;
};|code-block|syntax|javascript|3061178|用法：|3061179|$(".myClass").removeClassStartingWith('color');|3061180|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you want to use it in other places I suggest you an extension. This one is working fine for me.

<pre><code> $.fn.removeClassStartingWith = function (filter) {
 $(this).removeClass(function (index, className) {
 return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
 });
 return this;
};
</code></pre>

Usage:

<pre><code>$(".myClass").removeClassStartingWith('color');
</code></pre>

blocks|key|345194|text|删除以+begin**:**开头的任何类的泛型函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|345195|function+removeClassStartingWith(node,+begin)+{
++++node.removeClass+(function+(index,+className)+{
++++++++return+(className.match+(+new+RegExp("\\b"%2Bbegin%2B"\\S%2B",+"g")+)+%7C%7C+[]).join('+');
++++});
}|code-block|syntax|javascript|345196|http://jsfiddle.net/xa9xS/2900/|345197|​|345198|var+begin+=+'color-';

function+removeClassStartingWith(node,+begin)+{
++++node.removeClass+(function+(index,+className)+{
++++++++return+(className.match+(+new+RegExp("\\b"%2Bbegin%2B"\\S%2B",+"g")+)+%7C%7C+[]).join('+');
++++});
}

removeClassStartingWith($('#hello'),+'color-');

console.log($("#hello")[0].className);|345199|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+id="hello"+class="color-red+color-brown+foo+bar"></div>|345200|345201|entityMap|0|LINK|mutability|MUTABLE|url^0|4|7|4|5|0|0|0|V|0|V|0|0|0|1|0|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|16|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|17|8|@$9|18|A|19|B|C]]|E|@$9|1A|A|1B|1|1C]]|F|$]]|$1|N|3|O|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|E|@]|F|$]]|$1|P|3|Q|5|I|7|1G|8|@]|E|@]|F|$J|K]]|$1|R|3|S|5|I|7|1H|8|@]|E|@]|F|$J|K]]|$1|T|3|O|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|E|@]|F|$]]|$1|U|3|-4|5|6|7|1L|8|@]|E|@]|F|$]]]|V|$W|$5|X|Y|Z|F|$10|M]]]]

A generic function that remove any class starting with <code>begin</code>:

<pre><code>function removeClassStartingWith(node, begin) {
 node.removeClass (function (index, className) {
 return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
 });
}
</code></pre>

<a href="http://jsfiddle.net/xa9xS/2900/" rel="noreferrer">http://jsfiddle.net/xa9xS/2900/</a>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var begin = 'color-';

function removeClassStartingWith(node, begin) {
 node.removeClass (function (index, className) {
 return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
 });
}

removeClassStartingWith($('#hello'), 'color-');

console.log($("#hello")[0].className);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="hello" class="color-red color-brown foo bar"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|3060838|text|与@tremby的answer类似，这里是@Kobi的answer插件，可以匹配前缀或后缀。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3060839|3060840|ex)在stripClass('btn',+1)|unordered-list-item|style|CODE|3060841|时，当stripClass("btn-").|3060842|ex)剥离btn-mini和btn-danger时，剥离horsebtn和cowbtn，但不剥离btn-mini或btn|3060843|3060844|代码：|3060845|$.fn.stripClass+=+function+(partialMatch,+endOrBegin)+{
++++///+<summary>
++++///+The+way+removeClass+should+have+been+implemented+--+accepts+a+partialMatch+(like+"btn-")+to+search+on+and+remove
++++///+</summary>
++++///+<param+name="partialMatch">the+class+partial+to+match+against,+like+"btn-"+to+match+"btn-danger+btn-active"+but+not+"btn"</param>
++++///+<param+name="endOrBegin">omit+for+beginning+match;+provide+a+'truthy'+value+to+only+find+classes+ending+with+match</param>
++++///+<returns+type=""></returns>
++++var+x+=+new+RegExp((!endOrBegin+?+"\\b"+:+"\\S%2B")+%2B+partialMatch+%2B+"\\S*",+'g');

++++//+https://stackoverflow.com/a/2644364/1037948
++++this.attr('class',+function+(i,+c)+{
++++++++if+(!c)+return;+//+protect+against+no+class
++++++++return+c.replace(x,+'');
++++});
++++return+this;
};|code-block|syntax|javascript|3060846|https://gist.github.com/zaus/6734731|3060847|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18621161/1037948|1|https://stackoverflow.com/a/2644364/1037948|2^0|9|6|0|R|6|1|0|0|4|K|0|3|I|0|5|8|E|A|S|8|11|6|1C|8|1L|3|0|0|0|0|0|10|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]]|C|$]]|$1|D|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1G|8|@$A|1H|B|1I|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1J|8|@$A|1K|B|1L|H|I]]|9|@]|C|$]]|$1|L|3|M|5|G|7|1M|8|@$A|1N|B|1O|H|I]|$A|1P|B|1Q|H|I]|$A|1R|B|1S|H|I]|$A|1T|B|1U|H|I]|$A|1V|B|1W|H|I]|$A|1X|B|1Y|H|I]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|20|8|@]|9|@]|C|$]]|$1|Q|3|R|5|S|7|21|8|@]|9|@]|C|$T|U]]|$1|V|3|W|5|6|7|22|8|@]|9|@$A|23|B|24|1|25]]|C|$]]|$1|X|3|-4|5|6|7|26|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]|15|$5|10|11|12|C|$13|16]]|17|$5|10|11|12|C|$13|W]]]]

Similar to @tremby's <a href="https://stackoverflow.com/a/18621161/1037948">answer</a>, here is @Kobi's <a href="https://stackoverflow.com/a/2644364/1037948">answer</a> as a plugin that will match either prefixes or suffixes.

<ul>
<li>ex) strips <code>btn-mini</code> and <code>btn-danger</code> but not <code>btn</code> when <code>stripClass("btn-")</code>.</li>
<li>ex) strips <code>horsebtn</code> and <code>cowbtn</code> but not <code>btn-mini</code> or <code>btn</code> when <code>stripClass('btn', 1)</code></li>
</ul>

<h2>Code:</h2>

<pre><code>$.fn.stripClass = function (partialMatch, endOrBegin) {
 /// &lt;summary&gt;
 /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
 /// &lt;/summary&gt;
 /// &lt;param name="partialMatch"&gt;the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"&lt;/param&gt;
 /// &lt;param name="endOrBegin"&gt;omit for beginning match; provide a 'truthy' value to only find classes ending with match&lt;/param&gt;
 /// &lt;returns type=""&gt;&lt;/returns&gt;
 var x = new RegExp((!endOrBegin ? "\\b" : "\\S+") + partialMatch + "\\S*", 'g');

 // https://stackoverflow.com/a/2644364/1037948
 this.attr('class', function (i, c) {
 if (!c) return; // protect against no class
 return c.replace(x, '');
 });
 return this;
};
</code></pre>

<a href="https://gist.github.com/zaus/6734731" rel="nofollow noreferrer">https://gist.github.com/zaus/6734731</a>

blocks|key|1652440|text|我们可以通过.attr("class")获取所有的类，并通过数组、循环和过滤器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1652441|var+classArr+=+$("#sample").attr("class").split("+")
$("#sample").attr("class",+"")
for(var+i+=+0;+i+<+classArr.length;+i+%2B%2B)+{
++++//+some+condition/filter
++++if(classArr[i].substr(0,+5)+!=+"color")+{
++++++++$("#sample").addClass(classArr[i]);
++++}
}|code-block|syntax|javascript|1652442|演示：+|BOLD|1652443|entityMap^0|6|E|0|0|0|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|O|$]]

we can get all the classes by <code>.attr("class")</code>, and to Array, And loop &amp; filter:

<pre><code>var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i &lt; classArr.length; i ++) {
 // some condition/filter
 if(classArr[i].substr(0, 5) != "color") {
 $("#sample").addClass(classArr[i]);
 }
}
</code></pre>

demo: <a href="http://jsfiddle.net/L2A27/1/" rel="nofollow">http://jsfiddle.net/L2A27/1/</a>

blocks|key|3060987|text|对于jQuery插件，请尝试以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3060988|$.fn.removeClassLike+=+function(name)+{
++++return+this.removeClass(function(index,+css)+{
++++++++return+(css.match(new+RegExp('\\b('+%2B+name+%2B+'\\S*)\\b',+'g'))+%7C%7C+[]).join('+');
++++});
};|code-block|syntax|javascript|3060989|或者这个|3060990|$.fn.removeClassLike+=+function(name)+{
++++var+classes+=+this.attr('class');
++++if+(classes)+{
++++++++classes+=+classes.replace(new+RegExp('\\b'+%2B+name+%2B+'\\S*\\s?',+'g'),+'').trim();
++++++++classes+?+this.attr('class',+classes)+:+this.removeAttr('class');
++++}
++++return+this;
};|3060991|编辑:第二种方法应该更快一些，因为它只在整个类字符串上运行一次正则表达式替换。第一个(较短的)使用jQuery自己的removeClass方法，该方法遍历所有现有的类名，并逐个测试给定的正则表达式，因此在幕后，它为相同的工作执行了更多步骤。然而，在实际使用中，这种差异可以忽略不计。|3060992|Speed+comparison+benchmark|offset|length|3060993|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbench.me/yykh1nl6ke/1^0|0|0|0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

For a jQuery plugin try this
<pre><code>$.fn.removeClassLike = function(name) {
 return this.removeClass(function(index, css) {
 return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
 });
};
</code></pre>
or this
<pre><code>$.fn.removeClassLike = function(name) {
 var classes = this.attr('class');
 if (classes) {
 classes = classes.replace(new RegExp('\\b' + name + '\\S*\\s?', 'g'), '').trim();
 classes ? this.attr('class', classes) : this.removeAttr('class');
 }
 return this;
};
</code></pre>
Edit: The second approach should be a bit faster because that runs just one regex replace on the whole class string. The first (shorter) uses jQuery's own removeClass method which iterates trough all the existing classnames and tests them for the given regex one by one, so under the hood it does more steps for the same job. However in real life usage the difference is negligible.
<a href="https://jsbench.me/yykh1nl6ke/1" rel="nofollow noreferrer">Speed comparison benchmark</a>

blocks|key|1094304|text|您也可以使用Element.classList对普通的JavaScript执行此操作。也不需要使用正则表达式：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1094305|function+removeColorClasses(element)+{+++for+(let+className+of+Array.from(element.classList))+++++if+(className.startsWith("color-"))+++++++element.classList.remove(className);+}|style|CODE|1094306|注意:请注意，我们在启动之前创建了classList的Array副本，这一点很重要，因为classList是一个活动的DomTokenList，它将随着类的删除而更新。|1094307|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/classList^0|6|H|0|0|0|4Y|0|H|9|R|5|18|9|1N|C|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|G]|$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

You could also do this with vanilla JavaScript using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="nofollow noreferrer">Element.classList</a>. No need for using a regular expression either:

<code>
function removeColorClasses(element)
{
 for (let className of Array.from(element.classList))
 if (className.startsWith("color-"))
 element.classList.remove(className);
}
</code>

Note: Notice that we create an <code>Array</code> copy of the <code>classList</code> before starting, that's important since <code>classList</code> is a live <code>DomTokenList</code> which will update as classes are removed.

blocks|key|3060947|text|我也遇到了同样的问题，并想出了以下使用下划线的_.filter方法的方法。一旦我发现removeClass接受一个函数并为您提供一个类名列表，就可以很容易地将其转换为一个数组，并过滤掉类名以返回到removeClass方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3060948|//+Wildcard+removeClass+on+'color-*'
$('[class%5E="color-"]').removeClass+(function+(index,+classes)+{
++var
++++classesArray+=+classes.split('+'),
++++removeClass+=+_.filter(classesArray,+function(className){+return+className.indexOf('color-')+===+0;+}).toString();

++return+removeClass;
});|code-block|syntax|javascript|3060949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had the same issue and came up with the following that uses underscore's _.filter method. Once I discovered that removeClass takes a function and provides you with a list of classnames, it was easy to turn that into an array and filter out the classname to return back to the removeClass method.

<pre><code>// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
 var
 classesArray = classes.split(' '),
 removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

 return removeClass;
});
</code></pre>

blocks|key|3061067|text|基于ARS81的answer+(只匹配以开头的类名)，这里有一个更灵活的版本，也是一个hasClass()正则表达式版本。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3061068|用法：$('.selector').removeClassRegex('\\S*-foo[0-9]%2B')|3061069|$.fn.removeClassRegex+=+function(name)+{
++return+this.removeClass(function(index,+css)+{
++++return+(css.match(new+RegExp('\\b('+%2B+name+%2B+')\\b',+'g'))+%7C%7C+[]).join('+');
++});
};

$.fn.hasClassRegex+=+function(name)+{
++return+this.attr('class').match(new+RegExp('\\b('+%2B+name+%2B+')\\b',+'g'))+!==+null;
};|code-block|syntax|javascript|3061070|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/5263363/ars81|1|https://stackoverflow.com/a/32200028/101831^0|17|A|2|5|0|8|6|1|0|3|1D|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

Based on <a href="https://stackoverflow.com/users/5263363/ars81">ARS81</a>'s <a href="https://stackoverflow.com/a/32200028/101831">answer</a> (that only matches class names beginning with), here's a more flexible version. Also a <code>hasClass()</code> regex version.

Usage: <code>$('.selector').removeClassRegex('\\S*-foo[0-9]+')</code>

<pre><code>$.fn.removeClassRegex = function(name) {
 return this.removeClass(function(index, css) {
 return (css.match(new RegExp('\\b(' + name + ')\\b', 'g')) || []).join(' ');
 });
};

$.fn.hasClassRegex = function(name) {
 return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};
</code></pre>

blocks|key|1652667|text|这将有效地从节点的class属性中删除所有以prefix开头的类名。其他答案不支持SVG元素(在撰写本文时)，但此解决方案支持：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|1652668|$.fn.removeClassPrefix+=+function(prefix){
++++var+c,+regex+=+new+RegExp("(%5E%7C\\s)"+%2B+prefix+%2B+"\\S%2B",+'g');
++++return+this.each(function(){
++++++++c+=+this.getAttribute('class');
++++++++this.setAttribute('class',+c.replace(regex,+''));
++++});
};|code-block|syntax|javascript|1652669|entityMap^0|9|5|M|6|15|3|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|U|8|@]|E|@]|F|$J|K]]|$1|L|3|-4|5|6|7|V|8|@]|E|@]|F|$]]]|M|$]]

This will effectively remove all class names which begins with <code>prefix</code> from a node's <code>class</code> attribute. Other answers do not support SVG elements (as of writing this), but this solution does:

<pre><code>$.fn.removeClassPrefix = function(prefix){
 var c, regex = new RegExp("(^|\\s)" + prefix + "\\S+", 'g');
 return this.each(function(){
 c = this.getAttribute('class');
 this.setAttribute('class', c.replace(regex, ''));
 });
};
</code></pre>

blocks|key|1652856|text|解决此问题的另一种方法是使用数据属性，这些属性本质上是唯一的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652857|您可以像这样设置元素的颜色：$el.attr('data-color',+'red');|offset|length|style|CODE|1652858|你可以在css中设置它的样式：[data-color="red"]{+color:+tomato;+}|1652859|这就消除了使用类的需要，因为使用类的副作用是需要删除旧的类。|1652860|entityMap^0|0|E|U|0|F|10|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

An alternative way of approaching this problem is to use data attributes, which are by nature unique.

You'd set the colour of an element like: <code>$el.attr('data-color', 'red');</code>

And you'd style it in css like: <code>[data-color="red"]{ color: tomato; }</code>

This negates the need for using classes, which has the side-effect of needing to remove old classes.

blocks|key|1090291|text|您还可以使用元素的DOM对象的className属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1090292|var+$hello+=+$('#hello');
$('#hello').attr('class',+$hello.get(0).className.replace(/\bcolor-\S%2B/g,+''));|code-block|syntax|javascript|1090293|entityMap^0|F|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You could also use the <code>className</code> property of the element's DOM object:

<pre><code>var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));
</code></pre>

blocks|key|1094127|text|单词边界\b上的正则表达式拆分不是解决此问题的最佳解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1094128|var+prefix+=+"prefix";
var+classes+=+el.className.split("+").filter(function(c)+{
++++return+c.lastIndexOf(prefix,+0)+!==+0;
});
el.className+=+classes.join("+");|code-block|syntax|javascript|1094129|或者作为jQuery混合：|1094130|$.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+=+classes.join("+");
++++});
++++return+this;
};|1094131|entityMap^0|4|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

A regex splitting on word boundary <code>\b</code> isn't the best solution for this:

<pre><code>var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
 return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ");
</code></pre>

or as a jQuery mixin:

<pre><code>$.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 = classes.join(" ");
 });
 return this;
};
</code></pre>

blocks|key|1652582|text|如果有多个元素的类名为'example'，要删除所有元素中的‘color-’类，可以这样做:使用jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652583|var+objs+=+$('html').find('.example');
for(index=0+;+index+<+obj1s.length+;+index%2B%2B){
++++objs[index].className+=+objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}|code-block|syntax|javascript|1652584|如果你不在正则表达式中加a-z1-9-*，它不会删除名称中有一个数字或一些'-‘的类。|1652585|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

if you have more than one element having a class name 'example', to remove classes of 'color-'in all of them you can do this:[using jquery]

<pre><code>var objs = $('html').find('.example');
for(index=0 ; index &lt; obj1s.length ; index++){
 objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}
</code></pre>

if you don't put [a-z1-9-]* in your regex it won't remove the classes which have a number or some '-' in their names.

blocks|key|1652698|text|如果您只需要删除最后设置的颜色，下面的颜色可能适合您。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652699|在我的情况下，我需要在单击事件的body标记中添加一个颜色类，并删除最后设置的颜色。在这种情况下，存储当前颜色，然后查找数据标记以删除最后设置的颜色。|1652700|代码：|1652701|var+colorID+=+'Whatever+your+new+color+is';

var+bodyTag+=+$('body');
var+prevColor+=+bodyTag.data('currentColor');+//+get+current+color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID);+//+set+the+new+color+as+current|code-block|syntax|javascript|1652702|可能不完全是你需要的，但对我来说是，这是我看的第一个问题，所以我想我会分享我的解决方案，以防它对任何人有帮助。|1652703|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you just need to remove the last set color, the following might suit you.

In my situation, I needed to add a color class to the body tag on a click event and remove the last color that was set. In that case, you store the current color, and then look up the data tag to remove the last set color.

Code:


<pre><code>var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current
</code></pre>

Might not be exactly what you need, but for me it was and this was the first SO question I looked at, so thought I would share my solution in case it helps anyone.

Is there any easy way to remove all classes matching, for example, 

<pre><code>color-*
</code></pre>

so if I have an element:

<pre><code>&lt;div id="hello" class="color-red color-brown foo bar"&gt;&lt;/div&gt;
</code></pre>

after removing, it would be

<pre><code>&lt;div id="hello" class="foo bar"&gt;&lt;/div&gt;
</code></pre>

Thanks!

jQuery removeClass wildcard

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有什么简单的方法可以删除所有匹配的类，例如，color-*所以如果我有一个元素：<div id="hello" class="color-red color-brown foo bar"></div>删除后，它将是<div id="hello" class="foo bar"></div>谢谢!

问jQuery removeClass通配符
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery removeClass通配符EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery removeClass通配符
EN