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

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

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

この記事では、

  • 「removeClass()」とは?
  • 「removeClass()」の使い方

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

複数のクラスを扱う

  • 「callback」を利用する
  • クラスの追加「adClass()」について

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

「removeClass()」とは?

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

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

<ul>
      <li class="red">リスト1</li>
      <li class="blue">リスト2</li>
      <li class="green">リスト3</li>
</ul>

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

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

「removeClass()」の使い方

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

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

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

次の例を見てください。

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

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

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

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

<ul>
    <li>リスト1</li>
    <li class="test">リスト2</li>
    <li>リスト3</li>
</ul>

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

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

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

複数のクラスを扱う

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

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

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

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

<ul>
    <li class="test">リスト1</li>
    <li class="sample">リスト2</li>
    <li class="text">リスト3</li>
</ul>

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

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

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

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

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

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

<ul>
    <li class="red">リスト1</li>
    <li class="blue">リスト2</li>
    <li class="green">リスト3</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">リスト1</li>
      <li class="blue">リスト2</li>
      <li class="green sample">リスト3</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入門】 addClass()でクラス属性を操作する方法まとめ!
更新日 : 2019年5月4日

まとめ

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

  • 削除したいクラス名を引数に指定することでjQueryから実行できる
  • 複数のクラスを指定して削除することも可能
  • 関数を引数に指定することで複雑な条件分岐もできる

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

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説