初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
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」と表示され、削除されているのが確認できます。