jQuery｢removeClass｣で指定のクラスを削除する方法

2020年5月8日

jQueryのメソッド「.removeClass()」は、クラスを削除する事ができるメソッド。

今回は、jQueryで「指定のクラスを削除する事ができる」メソッド「.removeClass()」について、その使い方をサンプルを交えて解説しよう。

.removeClass()の機能とは？

removeClassの機能

.removeClass()は、指定した要素の「任意のクラスを削除」するメソッド。

例えば$("p").removeClass("test");とした場合、pタグのtestというクラスを削除する事ができる。

jQuery反映前

<p class="test">こんにちわ</p>

jQuery反映後

<p class>こんにちわ</p>

※ただし「class」という属性は残るので（特に問題はないのだが）、もし「class属性ごと」削除したいという場合は、.removeAttr()を使うと良いだろう。

.removeAttr()の詳しい使い方はこちらの記事を参考にしてみよう。

▶ jQuery｢removeAttr｣で要素の属性を削除する方法

.removeClass()の構文

指定要素の「すべてのクラスを削除」する構文

$("セレクタ").removeClass();

指定要素の「任意のクラスを削除」する構文

$("セレクタ").removeClass("クラス名");

指定要素に「複数のクラスを削除」する構文

$("セレクタ").removeClass("クラス名 クラス名");

複数のクラスを削除する場合は.removeClass("クラス名クラス名");のように「半角スペース」を空けて、複数のクラス名を指定すれば良い。

クラスの指定に「関数」を利用する場合

$("セレクタ").removeClass(function(インデックス番号, 現在のクラス名){ 関数の内容 });

functionの１つめの引数に「インデックス番号（該当する要素の0からの順番）」、２つ目の引数に「現在付与されているクラス名」を指定して受け取る。

引数で受け取った値は関数内の{}の中で利用できる。

逆に「クラスを追加」するメソッド

.removeClass()とは逆に「クラスを追加」する場合は.addClass()メソッドを使う事になる。

.addClass()メソッドについてはこちらの記事を参考にしてみよう！

▶ jQuery｢addClass｣で要素にクラスを追加する方法

jQueryで.removeClass()を使って、複数のクラスを追加する例

jQuery

$(function(){
 $("p span").removeClass("customer text-large");
});

HTML （jQuery反映前）

<p>おはようございます<span class="customer text-large">山田</span>様</p>

HTML （jQuery反映後）

<p>おはようございます<span class>山田</span>様</p>

このように書く事で$("p span"")タグのcustomerクラスとtext-largeクラスを削除する事ができた。

削除するクラスの指定に「関数を利用」する例

jQuery

$(function(){
 $("li").removeClass(function(index, currentClass){
   if( currentClass == "on anime" ){
    return "on";
  });
 });
});

HTML （jQuery反映前）

<li class="on anime">メニュー１</li>
<li class="on">メニュー２</li>
<li class="on">メニュー３</li>

HTML （jQuery反映後）

<li class="anime">メニュー１</li>
<li class="on">メニュー２</li>
<li class="on">メニュー３</li>

この例では、if( currentClass == "on anime" )の時、つまり現在onとanimeの両方のクラスがついているliの場合、onクラスを削除し、それ以外のliのonクラスは削除しないという例となる。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント