複数のクラスを扱う「callback」を利用するクラスの追加「adClass()」についてなどの応用的な使い方に関しても解説していきます。まとめ「removeClass()」とは?それでは、まず最初に「removeClass()」について基本的な知識から身に付けていきましょう!「removeClass()」は、HTML要素の「class属性」に付与されたクラスを削除することができるメソッドです。次のようなHTMLがあるとします。class="green">リスト3</li></ul>この例では、li要素にそれぞれ異なるクラスが付与されていますね。このような場合に、指定したクラスだけを削除してCSSの適用を除外することができるわけです。本記事では、「removeClass()」の基本から応用技まで体系的に学べるように解説するのでぜひ参考にしてみてください!「removeClass()」の使い方この章では、「removeClass()」の基本的な使い方について詳しく見ていきましょう!一般的な構文やクラスを削除する方法について学んでいきます。基本的な構文と書き方についてまずは、基本となる構文から見ていきましょう!「removeClass()」は、対象となるHTML要素に対して削除するクラス名を引数に指定することになります。次の例を見てください。);このように、引数へ削除したいクラス名を指定するだけなので簡単です。ちなみに、クラス名は文字列として記述し「スペース」を開けて複数のクラスを指定することも可能です。任意のクラスを削除する方法それでは、実際にクラスを削除するコードを書いてみましょう!サンプル例として、次のHTMLがあるとします。<li>リスト3</li></ul>この例では、「li要素」の1つだけにクラスが指定されています。このクラスを削除するには、次のように記述します。$('li').removeClass('test');対象要素を「$('li')」と指定することで、すべての「li要素」を対象にすることができます。その中から引数に指定した「test」というクラス名を探して削除するという意味になるわけです。複数のクラスを扱うこの章では、複数クラスに対してまとめて削除する方法について学習します。特定のクラスを複数指定する方法や、すべてのクラスに対して削除する方法を見ていきましょう!特定の複数クラスを削除する方法まずは、特定のクラスを複数指定して削除する方法を見ていきます。冒頭でも少し解説しましたが、「removeClass()」の引数にはスペースを空けることで複数指定が可能になります。次のようなHTMLがあるとします。class="text">リスト3</li></ul>li要素それぞれに異なるクラス名が付与されていますね。text');このように、スペースを空けてクラスを指定することで複数のクラスが削除されるわけです。すべてのクラスを削除する方法removeClass()には、複数のクラスをまとめて削除するもう1つの方法があります。それは、対象となるHTML要素に含まれているすべてのクラスを削除することです。方法は簡単で、removeClass()の引数に何も指定しなければいいのです。次のようなHTMLがあるとします。class="green">リスト3</li></ul>このようにそれぞれ異なったクラスがli要素に付与されています。この時に、li要素に含まれているすべてのクラスを削除するには次のように記述すればOKです!$('li').removeClass();すごくシンプルな記述ですね!引数を指定しない場合は、自動的にすべてのクラスが対象となり削除されるので覚えておきましょう!「callback」を利用するこの章では、removeClass()の引数にcallback関数を利用した方法について学んでいきます。関数処理を加えることで複雑な条件分岐ができるので見ていきましょう!引数に関数を指定する方法まずは、removeClass()の引数にcallback関数を利用する方法について見ていきます。これまでは、引数に削除したいクラス名を指定していたわけですが、これをそのまま関数に置き換えることができます。)指定した関数は「インデックス番号(index)」「クラス名(className)」の引数を取得します。インデックス番号は対象となるHTML要素の数となり、クラス名は現在付与されているクラスのことです。これらを活用することで、例えば特定のクラス名の時だけ別のクラス名に置換するようなことも可能です。callbackを利用して条件分岐する方法それでは、関数を利用した分岐処理について見ていきましょう。サンプル例として、要素に付与されているクラスを特定の条件下だけ削除する処理を作ってみます。次のHTMLがあるとします。sample">リスト3</li></ul>この例では、class属性に「sample」というクラスが一緒に付与されている要素がある点に注目してください。sample」というペアのクラスの「sample」だけを削除する処理を作ってみましょう。sample」のペアかどうかをチェックしています。該当する場合は「return」で「sample」を返すようにしています。これにより、削除するクラスを「sample」に指定できるわけです。sample」のペアだけクラスが「red」になるということですね。クラスの追加「addClass()」について最後に、クラスの削除ではなく追加を行える「addClass()」についても合わせてご紹介しておきます。使い方はremoveClass()とよく似ており、追加したいクラス名を引数に指定するだけです。次のサンプル例を見てください!$('h1').addClass('mycolor');この場合だと、「h1」要素に対して「mycolor」というクラス名を追加する意味になります。引数に関数を指定することができる点や複数クラスを追加できるのも同様です。2019年5月4日まとめ今回は、jQueryからHTML要素に付与されているクラスを削除できる「removeClass()」の学習をしました。関数を引数に指定することで複雑な条件分岐もできる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。