removeData( key )

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>

CSS

<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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, その他諸々, データ, データストレージ パーマリンク