JSのremoveClassとは？

JSのremoveClassとは？

Webページを動的に操作するJavaScriptにおいて、要素のスタイルや動作を変更することは非常に頻繁に行われます。その中でも、「クラスの追加・削除」は、要素の外観や機能を柔軟に変更できる強力な手法の一つです。今回は、数あるJavaScriptのメソッドの中でも、要素からクラスを削除する「removeClass()」について詳しく解説していきます。

removeClass()の基本

「removeClass()」は、HTML要素の「class属性」に付与されたクラスを削除することができるメソッドです。jQueryなどのJavaScriptライブラリで提供されています。素のJavaScriptにはremoveClass()は存在しませんが、classListプロパティを利用することで同様の処理を実現できます。

構文（jQueryの場合）

$(セレクタ).removeClass(クラス名);
  • $(セレクタ): クラスを削除したい要素を指定します。
  • クラス名: 削除したいクラス名を指定します。複数のクラスを削除する場合は、スペース区切りで指定します。

例

例えば、以下のようなHTMLがあるとします。 
<p class="text red large">ここにテキストが入ります</p>
この段落要素から「red」クラスを削除したい場合は、以下のJavaScriptコードを実行します。 
$("p").removeClass("red");
このコードを実行すると、段落要素のclass属性は「text large」となり、「red」クラスが削除されます。

removeClass()の使い方

removeClass()は、様々な状況で活用できます。ここでは、代表的な使用例をいくつか紹介します。

1. 要素のスタイル変更

特定のクラスにCSSでスタイルを定義しておき、JavaScriptでそのクラスを削除することで、要素のスタイルを動的に変更できます。例えば、ボタンをクリックしたら要素の色を変更するといった処理を実現できます。

2. 要素の表示・非表示の切り替え

CSSで特定のクラスに「display: none;」を設定しておき、JavaScriptでそのクラスを追加・削除することで、要素の表示・非表示を切り替えることができます。これは、アコーディオンメニューやモーダルウィンドウを実装する際に役立ちます。

3. JavaScript処理の分岐

特定のクラスが付与されている要素だけに処理を実行したい場合、hasClass()メソッドと組み合わせて使用します。hasClass()は、指定したクラスを持っているかどうかを判定するメソッドです。

removeClass()とclassListプロパティ

前述の通り、素のJavaScriptにはremoveClass()は存在しません。しかし、classListプロパティを利用することで同様の処理を実現できます。classListプロパティは、要素のクラスリストを表すDOMTokenListオブジェクトを返します。このオブジェクトは、クラスの追加、削除、有無の確認などを行うためのメソッドを提供しています。

classListプロパティを使ったクラスの削除

classListプロパティを使ってクラスを削除するには、`remove()`メソッドを使用します。 
const element = document.querySelector("p");
element.classList.remove("red");
このコードは、先ほどのjQueryの例と同じように、段落要素から「red」クラスを削除します。

removeClass()を使う上での注意点

removeClass()を使用する際には、以下の点に注意が必要です。

  • クラス名の重複: 同じクラス名を複数回削除しようととしても、一度しか削除されません。
  • 存在しないクラスの削除: 存在しないクラスを削除しようとしても、エラーは発生しません。何も起こりません。
  • スペースを含むクラス名: スペースを含むクラス名を削除する場合は、クラス名全体をクォートで囲む必要があります。

removeClass()の活用例

最後に、removeClass()を使ったより具体的な例を見ていきましょう。

タブメニューの実装

以下は、removeClass()を使ってシンプルなタブメニューを実装する例です。 
<ul class="tabs">
  <li class="tab active" data-target="tab1">タブ1</li>
  <li class="tab" data-target="tab2">タブ2</li>
  <li class="tab" data-target="tab3">タブ3</li>
</ul>

<div class="tab-content active" id="tab1">
  <p>タブ1の内容です。</p>
</div>

<div class="tab-content" id="tab2">
  <p>タブ2の内容です。</p>
</div>

<div class="tab-content" id="tab3">
  <p>タブ3の内容です。</p>
</div>

<script>
  $(function() {
    $(".tabs .tab").click(function() {
      // クリックされたタブのデータ属性を取得
      var target = $(this).data("target");

      // 全てのタブからactiveクラスを削除
      $(".tabs .tab").removeClass("active");
      // クリックされたタブにactiveクラスを追加
      $(this).addClass("active");

      // 全てのコンテンツからactiveクラスを削除
      $(".tab-content").removeClass("active");
      // クリックされたタブに対応するコンテンツにactiveクラスを追加
      $("#" + target).addClass("active");
    });
  });
</script>
このコードでは、タブをクリックすると、対応するコンテンツが表示されるように、removeClass()とaddClass()を使ってactiveクラスを付け替えしています。

まとめ

今回は、JavaScriptのremoveClass()メソッドについて解説しました。removeClass()は、要素のclass属性からクラスを削除するメソッドです。要素のスタイル変更や表示・非表示の切り替えなど、様々な場面で活用できます。jQueryを使用しない場合は、classListプロパティを利用することで同様の処理を実現できます。removeClass()をうまく活用して、動的なWebページを作成しましょう。

参考資料

  • <a href="https://api.jquery.com/removeclass/">jQuery.removeClass() | jQuery API Documentation</a>
  • <a href="https://developer.mozilla.org/ja/docs/Web/API/Element/classList">Element.classList - Web API | MDN</a>

QA

Q1: removeClass()で複数のクラスを一度に削除できますか？

A1: はい、削除したいクラス名をスペース区切りで指定することで、複数のクラスを一度に削除できます。

Q2: removeClass()とaddClass()の違いは何ですか？

A2: removeClass()は指定したクラスを削除するメソッドですが、addClass()は指定したクラスを追加するメソッドです。これらを組み合わせることで、クラスの付け替えなどが行えます。

Q3: removeClass()を使わずにクラスを削除する方法はありますか？

A3: はい、classListプロパティの`remove()`メソッドを使用することで、removeClass()と同じようにクラスを削除できます。また、`className`プロパティを直接操作してクラスを削除することもできますが、`classList`プロパティを使用する方が一般的で安全です。

その他の参考記事:jquery class 削除