jQueryのremoveClass()で部分一致のclassを削除する

jQueryのremoveClass()で、部分一致のclassを削除したい場合がたまにあるので実装方法をメモ。

サンプルコード

「is-type」から始まるclassを削除するようにしてみます。

HTML

<button id="remove">「is-typeXXX」を削除</button>
<div id="sample" class="c-btn is-type1 is-disabled">サンプル</div>

CSS

.c-btn {
	display: inline-block;
	padding: 0.8em 2em;
	border-radius: 3px;
	cursor: pointer;
	background: #eee;
}
.c-btn:disabled,
.c-btn.is-disabled {
	cursor: default;
}
.c-btn.is-type1 {
	color: red;
}

JavaScript

$(function() {
	$('#remove').on('click', function() {
		$('#sample').removeClass(function(index, className) {
			var removeClassName = 'is-type'; // 削除するclassの一部
			reg = new RegExp("\\b" + removeClassName + "\\S+", 'g');

			return (className.match(reg) || []).join(' ');
		});
	});
});

ボタンをクリックすると、is-type1のclassが削除されました。
removeClass()で部分一致のclassを削除するデモページ

次に「is-」から始まるclassを削除するようにしてみます。
HTML・CSSは先ほどと同じです。

JavaScript

$(function() {
	$('#remove').on('click', function() {
		$('#sample').removeClass(function(index, className) {
			var removeClassName = 'is-'; // 削除するclassの一部
			reg = new RegExp("\\b" + removeClassName + "\\S+", 'g');

			return (className.match(reg) || []).join(' ');
		});
	});
});

ボタンをクリックすると、is-type1とis-disabledのclassが削除されるようになりました。
removeClass()で部分一致のclassを削除するデモページ2
　

【参考サイト】

• .removeClass() | jQuery API Documentation
• jQueryの.removeClass()で「特定の文字列で始まるclass」をすべて削除する – Qiita