jQuery API の removeData( key ) は、マッチしたDOM要素に関連付いているデータから、keyに対応する値を削除するメソッド。
引数
- key
データのキー。
文字列。
記述方法
jQuery( セレクター ) . removeData( キー )
「セレクター」にマッチしたDOM要素に関連付いているデータから、「キー」に対応する値を削除する。
記述例
jQuery( '#sample' ) . removeData( 'name' )
idが「sample」であるDOM要素に関連付いているデータから、「name」に対応する値を削除する。
実装例（サンプル）
名前：
実装例（サンプル）の動作について
- 「太郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「太郎」と表示する。
- 「次郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「次郎」と表示する。
- 「削除」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前：」の右横に、「空っぽ」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-tarou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . data( 'name', '太郎' );
} );
jQuery( '#jquery-sample-button-zirou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . data( 'name', '次郎' );
} );
jQuery( '#jquery-sample-button-removeData' ) . click( function() {
jQuery( '#jquery-sample-name' ) . removeData( 'name' );
} );
jQuery( '#jquery-sample-button-data' ) . click( function() {
var str = jQuery( '#jquery-sample-name' ) . data( 'name' );
if( !str ) {
str = "空っぽ";
}
jQuery( '#jquery-sample-name' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-tarou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . data( 'name', '太郎' );
} );
jQuery( '#jquery-sample-button-zirou' ) . click( function() {
jQuery( '#jquery-sample-name' ) . data( 'name', '次郎' );
} );
jQuery( '#jquery-sample-button-removeData' ) . click( function() {
jQuery( '#jquery-sample-name' ) . removeData( 'name' );
} );
jQuery( '#jquery-sample-button-data' ) . click( function() {
var str = jQuery( '#jquery-sample-name' ) . data( 'name' );
if( !str ) {
str = "空っぽ";
}
jQuery( '#jquery-sample-name' ) . text( str );
} );
} );
// -->
</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>