jQuery .removeData() Method

What You’ll Learn

The .removeData() method deletes values from jQuery’s internal data cache on matched elements — the cleanup counterpart to .data(). This tutorial covers single-key removal, clearing all cached data, bulk deletion with arrays since 1.7, the difference from HTML data-* attributes, comparisons with jQuery.removeData(), the official demo, and five try-it labs.

Introduction

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

jQuery lets you attach arbitrary JavaScript values to DOM elements with .data() — plugin options, cached calculations, widget state, and more. When that state is no longer needed, .removeData() clears it from jQuery’s internal cache without removing the element from the page.

Available since jQuery 1.2.3, .removeData() accepts an optional key name. Pass a string to delete one value; call with no arguments to wipe the entire cache on each matched element. Since jQuery 1.7, pass an array of keys or a space-separated string to delete several values in one call.

Important: .removeData() does not remove HTML data-* attributes. A later .data("key") call may read the attribute again. Pair with .removeAttr() when you need both the cache and the attribute gone. Browse the jQuery DOM hub for related methods.

Understanding the .removeData() Method

.removeData( [name] ) operates on jQuery’s private data store attached to DOM nodes — the same store that .data() reads and writes. Deleting a key returns undefined on subsequent .data("key") calls unless a matching data-key HTML attribute still exists on the element.

The method returns the jQuery collection, so you can chain further calls on the same elements. It does not trigger change events and does not alter the visible DOM unless your application logic depends on the removed values.

📝 Syntax

jQuery .removeData() supports three forms:

Remove one key — since 1.2.3

.removeData( name )

• name — string naming the cached value to delete.
• Other keys on the same element are untouched.

Remove multiple keys — since 1.7

.removeData( [ list ] )

// Array of keys
.removeData( [ "foo", "bar" ] )

// Space-separated string
.removeData( "foo bar" )

Remove all cached data

.removeData()

• No arguments clears every value in jQuery’s internal cache for matched elements.
• HTML data-* attributes are still not removed.

Official removeData pattern

$( "div" ).data( "test1", "VALUE-1" );
$( "div" ).data( "test2", "VALUE-2" );
$( "div" ).removeData( "test1" );

Examples Gallery

Example 1 follows the official jQuery API documentation. Examples 2–5 cover clearing all data, bulk key removal, widget reset patterns, and the data-* attribute pitfall. Use DevTools or the Try-it links to run each snippet in the browser.

$( "div" ).data( "test1", "VALUE-1" );
$( "div" ).data( "test2", "VALUE-2" );
$( "div" ).removeData( "test1" );

// After removal:
// $( "div" ).data( "test1" ) → undefined
// $( "div" ).data( "test2" ) → "VALUE-2"

Before: test1 → undefined, test2 → undefined
After .data(): test1 → "VALUE-1", test2 → "VALUE-2"
After .removeData("test1"): test1 → undefined, test2 → "VALUE-2"

Only the named key is deleted from the cache

$( "#panel" )
  .data( "open", true )
  .data( "index", 3 )
  .data( "label", "Settings" );

$( "#panel" ).removeData();

// All three keys now return undefined (unless data-* attrs exist)

Before removeData(): open=true, index=3, label="Settings"
After removeData(): open=undefined, index=undefined, label=undefined

Entire internal cache cleared on #panel

$( "#cart" )
  .data( "items", 4 )
  .data( "total", 59.99 )
  .data( "currency", "USD" )
  .data( "session", "abc123" );

// Array form
$( "#cart" ).removeData( [ "items", "total" ] );

// Or space-separated string
// $( "#cart" ).removeData( "items total" );

// currency and session remain in the cache

After bulk remove: items=undefined, total=undefined
currency="USD", session="abc123" still cached

Array or "items total" string — both valid since 1.7

function destroySlider( $el ) {
  $el.off( ".slider" );
  $el.removeData( "slider" );
}

function initSlider( $el ) {
  destroySlider( $el );
  $el.data( "slider", { min: 0, max: 100, value: 50 } );
  $el.on( "click.slider", function() { /* ... */ } );
}

initSlider( $( "#range" ) );

destroySlider() unbinds namespaced events + removesData("slider")
initSlider() starts fresh — no stale state from prior init
Re-click "Reinit" safely replaces old widget data

// HTML: <div id="box" data-role="dialog"></div>

$( "#box" ).data( "role", "modal" );   // overrides cache
$( "#box" ).removeData( "role" );      // clears cache only

// Re-reads from data-role attribute → "dialog"
$( "#box" ).data( "role" );

// Full cleanup:
$( "#box" ).removeData( "role" ).removeAttr( "data-role" );

After .data("role","modal") → "modal"
After .removeData("role") → .data("role") returns "dialog" (from attribute)
After .removeAttr("data-role") → .data("role") returns undefined

removeData clears cache; removeAttr clears markup

🚀 Common Use Cases

• Plugin teardown — clear widget state with .removeData("pluginName") when destroying a UI component.
• Reinitialization — wipe stale options before calling init again on the same element.
• Memory hygiene — drop large cached objects (maps, arrays) when a panel closes.
• Selective cleanup — remove temporary keys while keeping long-lived configuration values.
• Bulk reset — use array or space-separated keys to delete related entries at once (1.7+).
• Attribute sync — pair with .removeAttr() when HTML data-* markup must match the cache.

📝 Notes

• Available since jQuery 1.2.3; bulk key removal added in jQuery 1.7.
• Only clears jQuery’s internal cache — not HTML data-* attributes.
• After removal, .data("key") may re-read from a matching data-key attribute.
• Use .removeAttr("data-key") alongside .removeData("key") for full cleanup.
• The bulk .data() getter reads data-* attributes once; later .removeData() does not re-trigger attribute parsing.
• .remove() cleans up data automatically; .detach() preserves it until you clear manually.
• Returns the jQuery object — safe to chain further DOM or data operations.

💡 Best Practices