jQuery . removeData( element, name )

jQuery API の jQuery . removeData( element, name ) は、elementに指定したDOM要素に関連付いているデータから、nameに対応する値を削除するメソッド。

removeData( key ) メソッドを使った方が便利なことが多い。

引数

element

データが関連付いているDOM要素。

name

データのキー。

文字列。

記述方法

jQuery . removeData( 要素, キー )

「要素」にマッチしたDOM要素に関連付いているデータから、「キー」に対応する値を削除する。

記述例

jQuery . removeData( div, 'area' )

div要素に関連付いているデータから、キー「area」に対応する値を削除する。

実装例(サンプル)

名前:

実装例(サンプル)の動作について

  • 「太郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前:」の右横に、「太郎」と表示する。
  • 「次郎」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前:」の右横に、「次郎」と表示する。
  • 「削除」ボタンをクリックし、「名前を表示」ボタンをクリックすると、「名前:」の右横に、「空っぽ」と表示する。

実装例(サンプル)のソースコード

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, 'name' );
        } );
    } );
    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>

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, Utilities, データ タグ: パーマリンク