jQueryでクラスを削除するremoveClassメソッドは、先日jQueryのaddClassメソッドでクラスを追加する方法とコールバック関数の使い方【jQuery】で解説したaddClassメソッドと同じく、よく使用するメソッドです。
removeClassメソッドの基本的な使い方や、使用例、コールバック関数についても詳しく解説していきます。
removeClassメソッドとは
jQueryのremoveClassメソッドは、指定した要素からクラスを削除できるメソッドです。
このremoveClassメソッドを使用して、動的に要素を変化させたりする事も可能です。
removeClassメソッドの基本的な使い方
最初に、removeClassメソッドの基本的な使い方を解説していきます。
基本的な構文は以下となります。
$("指定の要素").removeClass("削除したい任意のクラス名");基本的な記述はremoveClass()となり、引数には削除したい任意のクラス名を記述します。
※クラス名には「.」(ドット)は必要ありません。
例として以下をご覧ください。
<p class="color-red">クラスを削除する要素</p>$("p").removeClass("color-red");上記のコードを実行すると以下のようにクラスが削除されます。
<p>クラスを削除する要素</p>例として、指定した要素pから「color-red」というクラスを削除してみました。
このように、簡単にクラスの削除が可能です。
複数クラスを削除する方法
複数のクラスを削除する場合は、半角スペースを空けてクラス名を記述していきます。
<ul>
<li class="color-red">リスト1</li>
<li class="bg_white">リスト2</li>
<li class="text">リスト3</li>
</ul>$("li").removeClass("color-red bg_white text");上記のコードを実行すると以下のようになります。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>このように半角スペースを空けて記述する事で、複数のクラスを削除する事が可能です。
すべてのクラスを削除する方法
removeClassメソッドを使ってすべてのクラスを削除する場合はとても簡単で、引数に何も記述しないで実行するだけとなります。例として以下のコードをご覧ください。
<p class="color-red bg_white">すべてのクラスを削除する要素</p>$("p").removeClass();上記のコードを実行すると以下のようになります。
<p>すべてのクラスを削除する要素</p>このように、removeClassメソッドの引数を空にする事で、すべてのクラスを削除する事ができます。
コールバック関数について
removeClassメソッドの引数にはコールバック関数を使用する事ができます。
このコールバック関数の引数として2つの値を指定する事ができ、値の1つ目にはインデックス番号、2つ目には現在付与されているクラス名が格納されています。
コールバック関数の使用例として以下をご覧ください。
<ul>
<li class="color-red">リスト1</li>
<li class="color-red bg_white">リスト2</li>
<li class="bg_white">リスト3</li>
</ul>$("li").removeClass(function(index, currentClass){
if(currentClass === 'color-red bg_white'){
return 'bg_white';
}
});上記の例では、クラス「color-red」と「bg_white」がそれぞれのliにありますが、「color-red bg_white」と2つのクラスを持っている場合のみliからクラス「bg_white」を削除するという処理になっています。
今回はインデックス番号の使用はしていませんが、インデックス番号を組み合わせる事により、より複雑な処理を構築する事も可能となります。
さいごに
いかがでしたでしょうか。
removeClassメソッドはaddClassメソッドと同じく、動的なコンテンツによく使用されます。
先日紹介しましたjQueryのaddClassメソッドでクラスを追加する方法とコールバック関数の使い方【jQuery】も合わせて使えるようにしておく事をお薦めします。
