jQueryのremoveClass()メソッド

jQuery removeClass() メソッド: CSS クラスを簡単に削除

この記事では、HTML 要素から指定された CSS クラスを削除するために使用される jQuery の removeClass() メソッドについて詳しく説明します。 removeClass() メソッドの構文、パラメーター、使用方法、実際の例、addClass() メソッドおよび toggleClass() メソッドとの比較について説明します。

removeClass() メソッドとは？

removeClass() メソッドは、HTML 要素から1つ以上の CSS クラスを削除します。 CSS クラスを削除すると、要素のスタイルに影響します。たとえば、要素に赤いテキストの色を適用する "red" という CSS クラスがある場合、removeClass("red") を使用してそのクラスを削除すると、テキストの色はデフォルトの色に戻ります。

removeClass() 構文

removeClass() メソッドには、次の3つの構文形式があります。

  1. $(selector).removeClass()
  2. $(selector).removeClass(classname)
  3. $(selector).removeClass(function(index, class))

パラメータ

パラメータ 説明
selector CSS セレクタで、削除する CSS クラスを持つ要素を指定します。
classname 削除する CSS クラスの名前を文字列で指定します。複数のクラスを削除する場合は、スペースで区切って指定します。
function(index, class) 各要素のインデックス番号と現在のクラス属性の値を受け取る関数。この関数は、削除するクラス名を文字列で返す必要があります。

使用方法

  1. $(selector).removeClass()

    この形式は、選択した要素からすべての CSS クラスを削除します。

    
<p class="text-red text-bold">これは段落です。</p>

<script>
  $(document).ready(function(){
    $("p").removeClass(); // <p> タグからすべてのクラスが削除されます
  });
</script>

  2. $(selector).removeClass(classname)

    この形式は、選択した要素から指定された CSS クラスを削除します。

    
<p class="text-red text-bold">これは段落です。</p>

<script>
  $(document).ready(function(){
    $("p").removeClass("text-red"); // <p> タグから "text-red" クラスが削除されます
  });
</script>

  3. $(selector).removeClass(function(index, class))

    この形式は、選択した要素から、関数によって返される CSS クラスを削除します。関数は、各要素のインデックス番号と現在のクラス属性の値を受け取ります。

    
<p class="text-red">段落 1</p>
<p class="text-blue">段落 2</p>

<script>
  $(document).ready(function(){
    $("p").removeClass(function(index, classes) {
      return (index % 2 === 0) ? "text-red" : "text-blue"; // インデックス番号が偶数の場合は "text-red" を、奇数の場合は "text-blue" を削除します
    });
  });
</script>

removeClass() 使用案例

以下は、removeClass() メソッドを使用する例です。

  • 例 1: ボタンをクリックすると、段落から "highlight" クラスが削除されます。

    
<p class="highlight">これは段落です。</p>
<button>クラスを削除</button>

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").removeClass("highlight");
    });
  });
</script>

  • 例 2: フォームが送信されると、すべての入力フィールドから "error" クラスが削除されます。

    
<form>
  <input type="text" name="name" class="error">
  <input type="submit" value="送信">
</form>

<script>
  $(document).ready(function(){
    $("form").submit(function(event){
      event.preventDefault(); // フォームのデフォルトの送信動作を無効にします
      $("input").removeClass("error");
    });
  });
</script>

removeClass() と addClass() および toggleClass() の比較

メソッド 説明
addClass() HTML 要素に CSS クラスを追加します。
removeClass() HTML 要素から CSS クラスを削除します。
toggleClass() HTML 要素に CSS クラスが存在する場合は削除し、存在しない場合は追加します。

使用方法

  • 要素に CSS クラスを追加する場合は、addClass() メソッドを使用します。
  • 要素から CSS クラスを削除する場合は、removeClass() メソッドを使用します。
  • 要素に CSS クラスが存在するかどうかがわからない場合は、toggleClass() メソッドを使用します。 toggleClass() メソッドは、クラスが存在する場合は削除し、存在しない場合は追加します。

まとめ

jQuery の removeClass() メソッドは、HTML 要素から CSS クラスを簡単に削除する方法を提供します。addClass() および toggleClass() メソッドと組み合わせて使用​​すると、Web ページの要素のスタイルを動的に変更できます。 removeClass() メソッドの詳細については、jQuery の公式ドキュメントを参照してください。

関連する質問と回答

  1. 質問: removeClass() メソッドは、複数の CSS クラスを一度に削除できますか？

    回答: はい、removeClass() メソッドは、複数の CSS クラスを一度に削除できます。削除するクラス名をスペースで区切って指定します。

  2. 質問: removeClass() メソッドを使用して、要素からすべての CSS クラスを削除するにはどうすればよいですか？

    回答: removeClass() メソッドに引数を指定せずに呼び出すと、要素からすべての CSS クラスが削除されます。

  3. 質問: removeClass() メソッドは、要素のインラインスタイルも削除しますか？

    回答: いいえ、removeClass() メソッドは、要素のインラインスタイルは削除しません。要素のインラインスタイルを削除するには、css() メソッドを使用します。