【jQuery入門】removeClass()でクラスを削除する方法まとめ！

こんにちは、ライターのマサトです！

今回は、jQueryからHTML要素に付与されたクラスを削除することができる「removeClass()」について学習をしましょう！

この記事では、

という基本的な内容から、

複数のクラスを扱う

などの応用的な使い方に関しても解説していきます。この記事で、jQueryのremoveClass()をしっかり学習して自分のスキルアップを目指しましょう！

「removeClass()」とは？

それでは、まず最初に「removeClass()」について基本的な知識から身に付けていきましょう！「removeClass()」は、HTML要素の「class属性」に付与されたクラスを削除することができるメソッドです。

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

<ul>
      <li class="red">リスト１</li>
      <li class="blue">リスト２</li>
      <li class="green">リスト３</li>
</ul>

この例では、li要素にそれぞれ異なるクラスが付与されていますね。このような場合に、指定したクラスだけを削除してCSSの適用を除外することができるわけです。

本記事では、「removeClass()」の基本から応用技まで体系的に学べるように解説するのでぜひ参考にしてみてください！

「removeClass()」の使い方

この章では、「removeClass()」の基本的な使い方について詳しく見ていきましょう！一般的な構文やクラスを削除する方法について学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきましょう！「removeClass()」は、対象となるHTML要素に対して削除するクラス名を引数に指定することになります。

次の例を見てください。

対象HTML.removeClass( クラス名 );

このように、引数へ削除したいクラス名を指定するだけなので簡単です。ちなみに、クラス名は文字列として記述し「スペース」を開けて複数のクラスを指定することも可能です。

任意のクラスを削除する方法

それでは、実際にクラスを削除するコードを書いてみましょう！サンプル例として、次のHTMLがあるとします。

<ul>
    <li>リスト１</li>
    <li class="test">リスト２</li>
    <li>リスト３</li>
</ul>

この例では、「li要素」の１つだけにクラスが指定されています。このクラスを削除するには、次のように記述します。

$('li').removeClass('test');

対象要素を「$(‘li’)」と指定することで、すべての「li要素」を対象にすることができます。そして、その中から引数に指定した「test」というクラス名を探して削除するという意味になるわけです。

複数のクラスを扱う

この章では、複数クラスに対してまとめて削除する方法について学習します。特定のクラスを複数指定する方法や、すべてのクラスに対して削除する方法を見ていきましょう！

特定の複数クラスを削除する方法

まずは、特定のクラスを複数指定して削除する方法を見ていきます。冒頭でも少し解説しましたが、「removeClass()」の引数にはスペースを空けることで複数指定が可能になります。

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

<ul>
    <li class="test">リスト１</li>
    <li class="sample">リスト２</li>
    <li class="text">リスト３</li>
</ul>

li要素それぞれに異なるクラス名が付与されていますね。そこで、removeClass()の引数へすべてのクラス名を指定してみましょう！

$('li').removeClass('test sample text');

このように、スペースを空けてクラスを指定することで複数のクラスが削除されるわけです。

すべてのクラスを削除する方法

removeClass()には、複数のクラスをまとめて削除するもう１つの方法があります。それは、対象となるHTML要素に含まれているすべてのクラスを削除することです。

方法は簡単で、removeClass()の引数に何も指定しなければいいのです。次のようなHTMLがあるとします。

<ul>
    <li class="red">リスト１</li>
    <li class="blue">リスト２</li>
    <li class="green">リスト３</li>
</ul>

このようにそれぞれ異なったクラスがli要素に付与されています。

この時に、li要素に含まれているすべてのクラスを削除するには次のように記述すればOKです！

$('li').removeClass();

すごくシンプルな記述ですね！

引数を指定しない場合は、自動的にすべてのクラスが対象となり削除されるので覚えておきましょう！

「callback」を利用する

この章では、removeClass()の引数にcallback関数を利用した方法について学んでいきます。関数処理を加えることで複雑な条件分岐ができるので見ていきましょう！

引数に関数を指定する方法

まずは、removeClass()の引数にcallback関数を利用する方法について見ていきます。これまでは、引数に削除したいクラス名を指定していたわけですが、これをそのまま関数に置き換えることができます。

次のように指定すればOKです！

対象要素.remveClass( function(index, className) {  } )

指定した関数は「インデックス番号（index）」「クラス名（className）」の引数を取得します。インデックス番号は対象となるHTML要素の数となり、クラス名は現在付与されているクラスのことです。

これらを活用することで、例えば特定のクラス名の時だけ別のクラス名に置換するようなことも可能です。

callbackを利用して条件分岐する方法

それでは、関数を利用した分岐処理について見ていきましょう。サンプル例として、要素に付与されているクラスを特定の条件下だけ削除する処理を作ってみます。

次のHTMLがあるとします。

<ul>
      <li class="red sample">リスト１</li>
      <li class="blue">リスト２</li>
      <li class="green sample">リスト３</li>
</ul>

この例では、class属性に「sample」というクラスが一緒に付与されている要素がある点に注目してください。このときに「red sample」というペアのクラスの「sample」だけを削除する処理を作ってみましょう。

$('li').removeClass(function(index, className) {
   
   if(className === 'red sample') {
     
     return 'sample';
   
   }
      
})

この例では、引数に指定した関数の「className」を利用して「red sample」のペアかどうかをチェックしています。もし、該当する場合は「return」で「sample」を返すようにしています。

これにより、削除するクラスを「sample」に指定できるわけです。つまり、「red sample」のペアだけクラスが「red」になるということですね。

クラスの追加「addClass()」について

最後に、クラスの削除ではなく追加を行える「addClass()」についても合わせてご紹介しておきます。使い方はremoveClass()とよく似ており、追加したいクラス名を引数に指定するだけです。

次のサンプル例を見てください！

$('h1').addClass('mycolor');

この場合だと、「h1」要素に対して「mycolor」というクラス名を追加する意味になります。また、引数に関数を指定することができる点や複数クラスを追加できるのも同様です。

さらに詳しい使い方やアニメーションへの組み込み方などを次の記事でまとめているので参考にしてみてください！

まとめ

今回は、jQueryからHTML要素に付与されているクラスを削除できる「removeClass()」の学習をしました。最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！