JavaScriptで複数のclassを削除するには？

JavaScriptで複数のclassを削除するには？

JavaScriptで複数のclassを削除するには？

Webページの要素を操作する際に、JavaScriptを用いてclass属性を操作することはよくあります。 今回は、要素から複数のclassを一度に削除する方法について解説します。

Element.classList.remove()メソッド

Element.classList.remove()メソッドは、要素から指定したクラス名を削除するために使用します。 このメソッドは、複数のクラス名を引数として渡すことで、一度に複数のクラスを削除することができます。

構文

element.classList.remove("class1", "class2", ...);

elementは、クラスを削除する対象の要素です。 "class1", "class2", ... は、削除するクラス名です。

使用例

例えば、以下のようなHTMLがあるとします。

<div id="myDiv" class="box red large">
  これはサンプルの要素です。
</div>

この要素から"red"と"large"クラスを削除するには、以下のJavaScriptコードを実行します。

const myDiv = document.getElementById("myDiv");
myDiv.classList.remove("red", "large");

このコードを実行すると、要素のclass属性は"box"だけになります。

複数クラス削除のメリット

複数のクラスを削除する際に、classList.remove()メソッドを繰り返し使用することもできますが、 一度に複数のクラス名を指定することで、コードが簡潔になり、処理速度も向上する可能性があります。

使用上の注意点

  • 削除するクラス名が要素に存在しない場合でも、エラーは発生しません。
  • クラス名にスペースが含まれている場合は、それぞれのクラス名を別々の引数として渡す必要があります。

classList.remove()メソッドのサポートブラウザ

classList.remove()メソッドは、主要なブラウザで広くサポートされています。 ただし、古いブラウザではサポートされていない場合があるため、注意が必要です。

ブラウザ サポート状況
Chrome サポート済み
Firefox サポート済み
Safari サポート済み
Edge サポート済み
Internet Explorer 9以上でサポート

参考資料

よくある質問

Q1: classList.remove()メソッドで複数のクラスを削除できない場合は？

A1: 削除するクラス名が正しく指定されているか、要素に存在するかを確認してください。 また、古いブラウザを使用している場合は、classList.remove()メソッドがサポートされていない可能性があります。

Q2: classList.remove()メソッド以外に複数のクラスを削除する方法はありますか？

A2: classNameプロパティを操作することで、複数のクラスを削除することもできます。 ただし、classList.remove()メソッドの方が、コードが簡潔で、処理速度も向上する可能性があります。

Q3: classList.remove()メソッドを使用して、特定の条件に合致するクラスだけを削除できますか？

A3: はい、classList.remove()メソッドと条件分岐を組み合わせることで、 特定の条件に合致するクラスだけを削除することができます。 例えば、ループ処理と条件分岐を組み合わせることで、 特定の文字列を含むクラスだけを削除することができます。

その他の参考記事:jquery class 削除