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 削除