.removeData() JQ Home  <<  Utilities  <<  .removeData()

Remove arbitrary data entries.

Description

The .removeData() jQuery Data utility method, removes the specified data that was previously stored.

  • The .removeData() method provides a way to remove values that were previously set using the .data() method.

Syntax

Signature Description
.removeData( [keyOrArrayOfKeys] )Remove the specified data that was previously stored, optionally passing a key or array of keys to select the data.

Parameters

Parameter Description Type
keyOrArrayOfKeys A string naming the piece of data to remove or an array or space separated strings naming the pieces of data to remove. String or
Array

Return

A Boolean object.


.removeData( [keyOrArrayOfKeys] ) ExamplesUtilities  <<  Top

Remove the specified data that was previously stored, optionally passing a key or array of keys to select the data.

In the example below when we press the left button the first time we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove all data and output another message displaying any remaining attached data.

When we press the middle button the first time we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove 'dKey' data and output another message displaying any remaining attached data.

When we press the right button the first time we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove an array of key data and output another message displaying any remaining attached data.


$(function(){
  $('#btn16').one('click', function(){
    $('#div13').data({ aKey: [0,1,2,3], bKey: { a: 'prop1', b: 'prop2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
    $('#div13').removeData();
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
  });
  
  $('#btn17').one('click', function(){
    $('#div13').data({ cKey: [0,1,2,3], dKey: { a: 'prop1', b: 'prop2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
    $('#div13').removeData( 'dKey' );
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
  });
  
  $('#btn18').one('click', function(){
    $('#div13').data({ aKey: [0,1,2,3], bKey: [2,2,2], cKey: [52,33], 
                       dKey: { a: 'p1', b: 'p2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
    $('#div13').removeData( ['aKey','dKey','cKey'] );
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br />');
  });
});

div13. Some initial text.


Press the button below to action the above code:

                   

Related Tutorials

jQuery Intermediate Tutorials - Lesson 10 - jQuery Copy, Data & Type Utilities