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

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

.removeData( )要素に設定されたデータを削除

構文

要素に設定されたデータを削除返値:jQueryオブジェクト
jQo.removeData( [プロパティ名] )ver1.2.3〜
jQo.removeData( 配列 )ver1.7〜

機能

jQueryオブジェクトで指定した要素に設定されたデータを削除します。引数を省略すると、設定された全てのデータを削除します。

またv1.7からプロパティ名を半角スペースで区切って設定たり配列を利用して、複数のデータをまとめて削除できるようになりました。

解説

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

サンプル(removeData/01.html)を開いてbody内にdiv要素とbutton要素(id属性がcheckとremove)が2つあることを確認して下さい。jQueryは、まず以下の部分を確認してください。。

1行目ではdataメソッドを利用して、div要素にデータを設定しています。2行目以降では、id属性がcheckのbuttonをクリックしたらdiv要素に設定されたnameプロパティの値をアラートで表示するようにしています。

$("div").data("name", "john");
$("button#check").click(function(){
	var myName = $("div").data("name");
	alert(myName);
});

続いて以下の部分を確認して下さい。id属性がremoveのbuttonをクリックすると、removeDataメソッドによって引数に設定したnameプロパティが削除されます。

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

removeボタンをクリックする前にcheckボタンをクリックすると、アラートでnameプロパティの値「john」が表示されますが、removeボタンをクリックしてからcheckボタンをクリックすると「undefined」と表示され、データが削除されたのが確認できます。

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

前項ではデータが1つしか設定されていませんでした。ここでは複数のデータが設定されているサンプルでremoveDataメソッドの機能を確認します。サンプル(removeData/02.html)を開いてbody内の構成がremoveData/01.htmlと同じ事を確認してください。

jQueryでは、まず以下の部分を確認してください。dataメソッドの引数にnameとageの2つのプロパティが設定されたobjectオブジェクトを設定しています。

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

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

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

最後にデータを削除する処理を確認します。以下の様にid属性がremoveのbuttonをクリックしたらremoveDataメソッドを利用してnameプロパティを削除するようにしました。

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

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

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

v1.7からremoveDataメソッドの引数に「複数のプロパティ名を半角スペースで区切って設定」することで、複数のデータをまとめて削除できるようになりました。サンプル(removeData/03.html)を開いてbody内の構成はremoveData/02.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、id属性がremoveのbuttonがクリックされた時の処理だけが異なります。

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

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

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

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

v1.7からremoveDataメソッドの引数に配列を設定して、複数のデータをまとめて削除できるようになりました。
サンプル(removeData/04.html)を開いて、ほとんどremoveData/03.htmlと同じ事を確認してください。

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

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

結果はremoveData/03.htmlと同じになります。

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

removeDataメソッドは引数を設定しないことで、セレクタに設定されたデータを全て削除することができます。
サンプル(removeData/05.html)を開いて、ほとんどremoveData/04.htmlと同じ事を確認してください。

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

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

結果はremoveData/03.htmlやremoveData/04.htmlと同じになります。

関連項目

要素にデータを設定したい場合は、dataメソッドを利用して下さい。

メモ

HTML5のデータ属性は削除できません

removeDataメソッドでHTML5のデータ属性を削除することはできません。データ属性の利用方法はdataメソッドの「メモ」で説明しているので参考にして下さい。

<button id="check">check</button>
<button id="remove">remove</button>
<div data-name="john"></div>

一応、削除できないことを確かめるサンプルを作成しました。サンプル(removeData/test01.html)で何回removeボタンをクリックしてもデータを全て削除できないため、checkボタンをクリックすると「john」と表示されます。

本家サイトではremoveAttrメソッドを利用すれば削除できるとあるのですが、思うように機能しません(Macのsafariとchromeで確認)。サンプル(removeData/test02.html)ではremoveボタンをクリックするとremoveAttrメソッドでdiv要素のデータ属性を削除しているのですが、最初にcheckボタンをクリックした場合は、removeボタンをクリックしてもデータを削除することができません。しかし最初にremoveボタンをクリックすると、checkボタンをクリックした際に「undefined」と表示され、削除されているのが確認できます。