jQuery API の jQuery . removeData( element ) は、elementに指定したDOM要素に関連付いているデータを削除するメソッド。
removeData() メソッドを使った方が便利なことが多い。
引数
- element
データが関連付いているDOM要素。
記述方法
jQuery . removeData( 要素 )
「要素」にマッチしたDOM要素に関連付いているデータを削除する。
記述例
jQuery . removeData( div )
div要素に関連付いているデータを削除する。
実装例（サンプル）
名前：
実装例（サンプル）の動作について
- 「太郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「太郎」と表示する。
- 「次郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「次郎」と表示する。
- 「削除」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「空っぽ」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-tarou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . data( this, 'name', '太郎' );
} );
} );
jQuery( '#jquery-sample-button-zirou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . data( this, 'name', '次郎' );
} );
} );
jQuery( '#jquery-sample-button-removeData' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . removeData( this );
} );
} );
jQuery( '#jquery-sample-button-data' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
var name = jQuery. data( this, 'name' );
if( !name ) { name = "空っぽ"; }
jQuery( this ) . text ( name );
} );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-tarou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . data( this, 'name', '太郎' );
} );
} );
jQuery( '#jquery-sample-button-zirou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . data( this, 'name', '次郎' );
} );
} );
jQuery( '#jquery-sample-button-removeData' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery . removeData( this );
} );
} );
jQuery( '#jquery-sample-button-data' ) . click( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
var name = jQuery. data( this, 'name' );
if( !name ) { name = "空っぽ"; }
jQuery( this ) . text ( name );
} );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button-tarou">太郎</button>
<button id="jquery-sample-button-zirou">次郎</button>
<button id="jquery-sample-button-removeData">削除</button>
</p>
<p>
<button id="jquery-sample-button-data">名前を表示</button>
</p>
<p>名前：<span id="jquery-sample-name"></p></li>
</div>
<p>
<button id="jquery-sample-button-tarou">太郎</button>
<button id="jquery-sample-button-zirou">次郎</button>
<button id="jquery-sample-button-removeData">削除</button>
</p>
<p>
<button id="jquery-sample-button-data">名前を表示</button>
</p>
<p>名前：<span id="jquery-sample-name"></p></li>
</div>