jQuery .removeData() Method

What You’ll Learn

jQuery.removeData(element [, name]) deletes values previously stored with jQuery.data(). This tutorial covers removing one key vs clearing all data, the official demo, how it differs from .removeData(), data-* pitfalls, five examples, and try-it labs.

Introduction

This page covers the static utility jQuery.removeData() (same API as api.jquery.com/jQuery.removeData). The preferred collection method .removeData() is documented under DOM.

After you attach values with jQuery.data() or .data(), you often need to clean them up — widget destroy, reset, or re-init. Since jQuery 1.2.3, jQuery.removeData(element [, name]) is the low-level way to delete those cached entries for a single DOM node.

Official docs note this is low-level: day to day, prefer $(element).removeData(). Learn the static form so you can read utility demos and work when you already hold a raw element. See the Utilities hub and jQuery.data().

Understanding the jQuery.removeData() Method

Pass a DOM element first. Optionally pass a string name for the key to delete. Omit name to wipe the whole store for that element.

Only the internal jQuery cache is affected. HTML data-* attributes are left alone unless you also call .removeAttr().

📝 Syntax

Signature (jQuery 1.2.3+):

jQuery.removeData( element [, name ] )

Parameters

• element (Element) — DOM node whose data should be cleared.
• name (String, optional) — key to remove. Omit to remove all stored values for the element.

Return value

• undefined — not chainable like .removeData().

Official pattern

var div = $( "div" )[ 0 ];
jQuery.data( div, "test1", "VALUE-1" );
jQuery.data( div, "test2", "VALUE-2" );
jQuery.removeData( div, "test1" );
// test1 gone; test2 still "VALUE-2"

Examples Gallery

Examples follow the official jQuery API demo and practical cleanup patterns.

var div = $( "div" )[ 0 ];
$( "span" ).eq( 0 ).text( "" + $( "div" ).data( "test1" ) );
jQuery.data( div, "test1", "VALUE-1" );
jQuery.data( div, "test2", "VALUE-2" );
$( "span" ).eq( 1 ).text( "" + jQuery.data( div, "test1" ) );
jQuery.removeData( div, "test1" );
$( "span" ).eq( 2 ).text( "" + jQuery.data( div, "test1" ) );
$( "span" ).eq( 3 ).text( "" + jQuery.data( div, "test2" ) );

value1 before: undefined
value1 after creation: VALUE-1
value1 after removal: undefined
value2 after removal: VALUE-2

var el = document.getElementById( "box" );
jQuery.data( el, "a", 1 );
jQuery.data( el, "b", 2 );
jQuery.removeData( el );
console.log( jQuery.data( el ) ); // {} (or empty store)

Both a and b removed
Store is empty for that element

// <div id="x" data-score="10"></div>
var el = $( "#x" )[ 0 ];
$( "#x" ).data( "score" );           // 10 (from attribute into cache)
jQuery.removeData( el, "score" );
$( "#x" ).attr( "data-score" );      // still "10"
$( "#x" ).data( "score" );           // may become 10 again from attr

Cache key cleared
data-score attribute still present
.next .data() may re-seed from markup

var el = $( "#box" )[ 0 ];
jQuery.data( el, "x", 1 );

// Static utility (this tutorial)
jQuery.removeData( el, "x" );

// Preferred instance method
$( "#box" ).data( "x", 1 ).removeData( "x" );

Both clear the same internal key
Instance form chains; static returns undefined

$.fn.counter = function( opts ) {
  return this.each(function() {
    jQuery.data( this, "counter", opts || { n: 0 } );
  });
};
$.fn.counterDestroy = function() {
  return this.each(function() {
    jQuery.removeData( this, "counter" );
  });
};

$( "#box" ).counter( { n: 5 } );
$( "#box" ).counterDestroy();

counter data set, then removed on destroy
Element ready for a fresh init

🚀 Common Use Cases

• Plugin destroy — drop options and timers stored on the host node.
• Reset before re-init — clear stale keys so new options win.
• Official-style samples — pair with jQuery.data on div[0].
• Raw DOM helpers — when you already unwrapped a collection.
• Partial cleanup — remove one key and keep others.
• Learning path — bridge to .removeData().

📝 Notes

• Added in jQuery 1.2.3; still in modern jQuery 3.x.
• Official guidance: prefer .removeData().
• First argument must be a DOM element.
• Does not remove HTML data-* attributes.
• Returns undefined (not a jQuery object).
• Instance .removeData() also supports arrays / space-separated names (1.7+) — richer than this static signature.
• Related: jQuery.data(), .data(), jQuery.hasData().

💡 Best Practices