初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.removeClass( )クラス属性の削除

構文

class属性を削除jQueryオブジェクト
jQo.removeClass( )ver1.0〜
jQo.removeClass( クラス名 )ver1.0〜
jQo.removeClass( Function )ver1.4〜

機能

jQueryオブジェクトで指定した要素から引数に設定したクラス（class属性）を削除します（引数を設定しない場合には全てのクラスを削除します）。引数にはfunctionを指定することも可能で、条件によって削除するクラスを変更するなど高度な処理にも対応できます。

解説

クラス名を指定して削除

サンプル（removeClass/01.html）を開いてhtml内にclass属性「blueBack」が付加された２つのdiv要素があり、下に配置されたdivにはid属性「test」が設定されていることを確認して下さい。 

<div class="blueBack"></div>
<div id="test" class="blueBack"></div>
<button>CLICK</button>

jQueryは以下の様に記述され、buttonをクリックするとid属性がtestのdiv要素に対しremoveClassメソッドを利用してclass属性の「blueBack」を削除します。 

$("button").click(function(){
	$("div#test").removeClass("blueBack");
});

結果として、buttonをクリックするとid属性がtestのdiv（下のdiv要素）はclass属性「blueBack」が削除され背景色がグレーになります。

複数のクラスをまとめて削除

removeClassメソッドは複数のclass属性をまとめて削除することができます。
サンプル（removeClass/02.html）を開いて２つのdivにclass属性「blueBack」と「redBorder」が設定されていることを確認して下さい。さらに下に配置されたdivにはid属性「test」が設定されています。 

<div class="blueBack redBorder"></div>
<div id="test" class="blueBack redBorder"></div>
<button>CLICK</button>

jQueryは以下の様になっており、removeClassメソッドの引数に２つのクラス名を指定しているのを確認して下さい。クラス名は半角スペースで区切ります（カンマなどで区切らないように注意しましょう）。 

$("button").click(function(){
	$("div#test").removeClass("blueBack redBorder");
});

その結果、buttonをクリックすると下のdiv要素は赤枠が外れて背景色がグレーになります。

hasClassメソッドでは、複数のクラスを調査する場合はクラス名の順番やスペースの数なども完全一致しなければいけません。→参考：hasClassメソッド - 複数のクラス属性の有無を調べる

しかしremoveClassメソッドはクラス名の順番などが違っていても機能します。サンプル（removeClass/02b.html）を開いて、ほとんどremoveClass/02.htmlと同じことを確認して下さい。異なるのは以下の様にremoveClassメソッドの引数に設定したクラス名が逆になっている点だけです。 

$("button").click(function(){
	$("div#test").removeClass("redBorder blueBack");
});

buttonをクリックするとクラスが外れることから、順番などが異なっていても機能することが確認できます。

すべてのクラスをまとめて削除

removeClassメソッドは引数に何も設定しないことで、すべてのclass属性をまとめて削除することができます。サンプル（removeClass/03.html）を開いてbody内の構成がremoveClass/02.htmlと同じことを確認して下さい。jQueryは以下の様にremoveClassメソッドの引数を設定しないようにしました。 

$("button").click(function(){
	$("div#test").removeClass( );
});

その結果、buttonをクリックすると下のdiv要素から全てのクラス属性が削除され、赤枠のない背景色がグレーのdiv要素になります。

引数にFunctionを設定

サンプル（removeClass/04.html）を開いてhtml内に２つのdiv要素があり、上のdiv要素にはclass属性でblueBackとredBorderが設定され、下のdiv要素にはblueBackしか設定されていないことを確認して下さい。jQueryは以下の様に記述されremoveClassの引数にfunctionの「classFunc」が設定されています。 

$("button").click(function(){
	$("div").removeClass(classFunc);
});

removeClassの引数に設定するFunctionは以下の様な構文になっています。まず２つの引数（インデックス番号/現在付加されているクラス名）を受け取ります。これらの引数の値は｛｝内の処理で利用することができます。そして任意の処理の後で最終的に削除したいクラス名をreturnで返すようにします。

removeClassに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在付加されているクラス名){
　任意の処理（2つの引数を利用可能）
　return 削除したいクラス名;
}

サンプルremoveClass/04.htmlで利用したclassFuncは以下の様になっており、引数で受け取った変数currentClass（現在付加されているクラス名）がblueBackとredBorderだったら（複数のclassが設定されている場合は、下記のように半角スペースで区切って表記します）、変数removedClassに空の文字列""（つまり何のclassも削除しません）を代入し、そうでなかったらblueBack（つまりblueBackを削除します）を代入し、returnで返します。 このサンプルでは引数のindex（インデックス番号）は利用していません。 

classFunc = function(index, currentClass) {
	var removedClass;
	if ( currentClass == "blueBack redBorder" ) {
		removedClass = "";
	}else{
		removedClass = "blueBack";
	}
	return removedClass;
}

結果として、buttonをクリックするとblueBackとredBorderのclass属性が付いている上のdivは何のclassも削除しません（水色の背景で赤枠が表示されます）。blueBackのclass属性しか付いていない下のdiv要素はblueBackのclass属性が削除されて、グレーの背景になります。