デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

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

jQuery.removeData( )要素からデータを削除

構文

要素からデータを削除返値:jQueryオブジェクト
jQuery.removeData( DOM要素 [,プロパティ名] )ver1.2.3〜

機能

jQuery.dataメソッドによって要素に設定されたデータを削除します。プロパティ名を省略すると、DOMに設定された全てのデータを削除します。

jQuery.removeDataメソッドはremoveDataメソッドと似た機能ですが、要素の指定にjQueryオブジェクトではなくDOMオブジェクトを利用しなければならず、あまり使い勝手が良くありません。removeDataメソッドを利用するようにしましょう。

解説

プロパティ名を指定してデータを削除

サンプル(jRemoveData/01.html)を開いてbody内にdiv要素とbutton要素(id属性がcheckとremove)が2つあることを確認して下さい。jQueryは、まず以下の部分を確認してください。dataメソッドの引数にnameとageの2つのプロパティが設定されたobjectオブジェクトを設定しています。

$.data($("div")[0], {name:"john", age:18});

データを確認する処理は以下の様に記述され、id属性がcheckのbuttonがクリックされたらjQuery.dataメソッドを利用してdiv要素に設定されたデータを取得し、そのデータ(objectオブジェクト)をjQuery.eachメソッドappendメソッドによってbody内に表示するようにしています。

$("button#check").click(function(){
	var ansObj = $.data($("div")[0]);
	$.each(ansObj, function(prop, value){
		$("body").append(prop + "の値は" + value + "<br/>");
	});
	$("body").append("----------------------------------"<br/>");
});

続いてデータを削除する処理を確認します。以下の様にid属性がremoveのbuttonをクリックしたらjQuery.removeDataメソッドを利用してdiv要素に設定されたnameプロパティを削除するようにしました。第1引数はjQueryオブジェクトを設定しているように見えますが、後に[0]と追加することでjQueryオブジェクトから最初のDOM要素を取得しています

$("button#remove").click(function(){
	$.removeData($("div")[0], "name");
});

結果として、removeボタンをクリックする前にcheckボタンをクリックするとnameプロパティとageプロパティの値が表示されますが、removeボタンをクリックした後でcheckボタンをクリックするとageプロパティの値しか表示されません。このことからjQuery.removeDataメソッドによって複数設定されたデータの中から、指定したnameプロパティだけが削除されたことが確認できます。

すべてのデータを削除する

removeDataメソッドはプロパティ名を設定しないと、DOM要素に設定されたデータを全て削除することができます。サンプル(jRemoveData/02.html)を開いて、ほとんどjRemoveData/01.htmlと同じ事を確認してください。

異なるのはid属性がremoveのbuttonをクリックした時の以下の処理です。引数にプロパティ名を設定しないことで、DOM要素に設定されたすべてのデータをまとめて削除することができます。

$("button#remove").click(function(){
	$.removeData($("div")[0]);
});

結果として、removeボタンをクリックする前にcheckボタンをクリックするとnameプロパティとageプロパティの値が表示されますが、removeボタンをクリックした後でcheckボタンをクリックするとプロパティの値は何も表示されません。このことからjQuery.removeDataメソッドによって、div要素に設定された全てのデータが削除されたことが確認できます。

関連項目

セレクタで設定する要素を選択できるremoveDataメソッドの方が便利に利用できると思います。

メモ

複数のデータをまとめて削除する

本家ページでは説明がなかったのですが、removeDataメソッドはv1.7から「複数のプロパティ名を半角スペースで区切って設定」することで、複数のデータをまとめて削除できるのでjQuery.removeDataメソッドもできるのでは?と確認しました。

サンプル(jRemoveData/test01.html)を開いてbody内の構成はjRemoveData/02.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、id属性がremoveのbuttonがクリックされた時の処理だけが異なります。

jQuery.removeDataメソッドのプロパティの指定が以下の様に「複数のプロパティ名が半角スペースで区切られて」設定されています(あくまでも1つの文字列として設定します)。このように記述する事で、複数のデータをまとめて削除することができます。

$("button#remove").click(function(){
	$.removeData($("div")[0], "name age");
});

結果として、removeボタンをクリックした後でcheckボタンをクリックするとプロパティは表示されません。このことからjQuery.removeDataメソッドによって複数のデータがまとめて削除されたことが確認できます。

配列を利用してデータを削除する

本家ページでは説明がなかったのですが、removeDataメソッドと同じように配列を設定して、複数のデータをまとめて削除できます。サンプル(jRemoveData/test02.html)を開いて、ほとんどjRemoveData / test01.htmlと同じ事を確認してください。

異なるのはid属性がremoveのbuttonをクリックした時の以下の処理です。引数に「削除したいプロパティ名(文字列)の要素を持つ配列」を設定することで、複数のデータをまとめて削除することができます。

$("button#remove").click(function(){
	$.removeData($("div")[0], ["name","age"]);
});

結果はjRemoveData/test01.htmlと同じになります。