サイト制作に関するメモ書き

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

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
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP