【徹底解説】JavaScript/jQuery/CSSでクラス操作：特定の文字列から始まるクラスを削除

2024-04-06

JavaScript、jQuery、CSSで特定の文字列から始まるクラスを削除する方法

この解説では、JavaScript、jQuery、CSSを用いて、特定の文字列から始まるすべてのクラスを要素から削除する方法について、それぞれの特徴や注意点も含めて詳しく解説します。

classList プロパティを使う方法

JavaScriptの標準機能である classList プロパティを使うと、要素のクラスリストを操作できます。

以下のコードは、element 要素から、"js-" で始まるすべてのクラスを削除する例です。

const element = document.querySelector('.my-element');

// "js-" で始まるクラス名の配列を取得
const classesToRemove = Array.from(element.classList).filter(className => className.startsWith('js-'));

// 配列内の各クラスを削除
classesToRemove.forEach(className => element.classList.remove(className));

この方法の利点は、以下の点が挙げられます。

シンプルで分かりやすいコード
汎用性が高く、さまざまな状況で使用できる
ブラウザのサポート状況が良好

一方、以下の点に注意する必要があります。

古いブラウザでは classList プロパティがサポートされていない
ループ処理が必要なので、要素数が多い場合に処理速度が遅くなる可能性がある

replace() メソッドを使って、要素のクラス属性値を置換することもできます。

const element = document.querySelector('.my-element');

// "prefix-" で始まるクラス名を削除
element.classList.value = element.classList.value.replace(/prefix-\w+/g, '');

ループ処理が必要ないため、処理速度が速い
正規表現を使って、より複雑なパターンにも対応できる

正規表現の知識が必要
誤ったパターンを設定すると、意図しないクラスまで削除してしまう可能性がある

jQueryを使うと、JavaScriptよりも簡潔にコードを書くことができます。

const element = $('.my-element');

// "jquery-" で始まるすべてのクラスを削除
element.removeClass('jquery-');

JavaScriptよりも簡潔で分かりやすいコード
多くの開発者に利用されているため、情報やサンプルコードが豊富

jQueryライブラリを読み込む必要がある
JavaScriptの知識がある程度必要

CSSの :not() 擬似クラスと :matches() 擬似クラスを使うと、特定の条件を満たす要素にスタイルを適用できます。

以下のコードは、"class-" で始まるすべてのクラスを持つ要素を除外して、背景色を青色にする例です。

.my-element:not([class^="class-"]) {
  background-color: blue;
}

JavaScriptやjQueryを使用せずに、CSSのみで記述できる
処理速度が速い

JavaScriptやjQueryに比べて機能が限定されている
古いブラウザでは対応していない可能性がある

特定の文字列から始まるクラスを削除するには、JavaScript、jQuery、CSSそれぞれにメリットとデメリットがあります。

状況や目的に合わせて、最適な方法を選択することが重要です。

補足

上記のコードはあくまで例であり、実際のコードは状況に合わせて調整する必要があります。
詳細については、各フレームワークやライブラリの公式ドキュメントを参照してください。

HTML

<div class="my-element js-class1 js-class2 jquery-class1 jquery-class2 class-1 class-2">
  これはサンプル要素です。
</div>

JavaScript

// 1.1. `classList` プロパティを使う方法

const element = document.querySelector('.my-element');

// "js-" で始まるクラス名の配列を取得
const classesToRemove = Array.from(element.classList).filter(className => className.startsWith('js-'));

// 配列内の各クラスを削除
classesToRemove.forEach(className => element.classList.remove(className));

// 1.2. `replace()` メソッドを使う方法

element.classList.value = element.classList.value.replace(/prefix-\w+/g, '');

// 2. jQueryを使う方法

$('.my-element').removeClass('jquery-');

CSS

.my-element:not([class^="class-"]) {
  background-color: blue;
}

上記コードをすべてコピーして、HTMLファイルとJavaScriptファイルを作成し、ブラウザで開くと、以下の結果を確認できます。

"js-class1" と "js-class2" クラスが要素から削除されます。
"class-1" と "class-2" クラスを持つ要素は背景色が青色になります。

サンプルコードを参考に、さまざまな方法を試して、自分に合った方法を見つけてください。

JavaScript

for ループを使う方法

classList プロパティや replace() メソッドを使用するよりも古い方法ですが、シンプルなコードで記述できます。

const element = document.querySelector('.my-element');
const classList = element.classList;

// "remove-" で始まるクラスを削除
for (let i = classList.length - 1; i >= 0; i--) {
  if (classList[i].startsWith('remove-')) {
    classList.remove(classList[i]);
  }
}

filter() メソッドと forEach() メソッドを使う方法

classList プロパティの filter() メソッドと forEach() メソッドを使って、特定の条件を満たすクラスを削除することもできます。

const element = document.querySelector('.my-element');

// "custom-" で始まるクラスを削除
element.classList.filter(className => className.startsWith('custom-')).forEach(className => element.classList.remove(className));