jQuery removeData() Method

Beginner
5 min read
Updated: Oct 2026
4 examples
Live preview
Definition

What Is removeData()?

.removeData([name|list]) deletes values previously stored with .data() from jQuery’s internal cache (since 1.2.3; bulk keys since 1.7). With no arguments, it clears all cached values.

Remember
$div.data("test1", "VALUE-1")
$div.removeData("test1")          // one key
$div.removeData(["a", "b"])       // bulk (1.7+)
$div.removeData("a b")            // space-separated (1.7+)
$div.removeData()                 // clear all

// HTML data-* attributes are NOT removed
NeedUse
Store a value.data(key, value)
Delete a cached key.removeData(key)
Check if cache existsjQuery.hasData(el)
Remove HTML data-*.removeAttr("data-key")
Approach

How to Use removeData()

Select elements, choose keys (or none), clear the cache.

  1. Select the element(s) that hold jQuery data.
  2. Pass one key, a list of keys (1.7+), or nothing to clear all.
  3. Call .removeData(…) — the element stays in the DOM.
  4. If HTML data-* must go too, also call .removeAttr().
PieceRequired?Role
jQuery collectionYesElements whose cache to update
name / listOptionalKey(s) to delete; omit to clear all
Return—Same collection (chainable)

Pseudocode

Pseudocode
for each element in matched set:
    if no arguments:
        clear entire jQuery data cache
    else if list of keys:
        delete each named key
    else:
        delete that one key
    // HTML data-* attributes unchanged

// Official idea:
data("test1", "VALUE-1")
data("test2", "VALUE-2")
removeData("test1")
→ test1 gone; test2 still there
Reference

Cheat Sheet

Keep these facts handy while clearing the data cache.

TopicDetail
Syntax.removeData() / .removeData(name) / .removeData(list)
Since1.2.3 (bulk list since 1.7)
ClearsjQuery internal .data() cache only
data-*Not removed from the HTML
Bulk keysArray or space-separated string
ElementStays in the DOM
ChainableYes — returns the collection
Try it

Live Preview

Set sample keys on a demo div, then remove one, many, or all and inspect the cache.

Browser demo of .removeData() — same idea as the examples below.

Result
Ready — pick an action and run.
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Official Demo: Remove One Key

Store two values, delete test1, confirm test2 remains.

jQuery
var $div = $("#box");
console.log($div.data("test1"));           // undefined
$div.data("test1", "VALUE-1");
$div.data("test2", "VALUE-2");
console.log($div.data("test1"));           // "VALUE-1"
$div.removeData("test1");
console.log($div.data("test1"));           // undefined
console.log($div.data("test2"));           // "VALUE-2"
Try It Yourself

How It Works

  1. Before set. No test1 yet → undefined.
  2. Store two keys. test1 and test2 live in the cache.
  3. Remove one. removeData("test1") deletes only that key.
  4. Other keys stay. test2 is still readable.

Example 2 — Clear All Cached Data

Call .removeData() with no arguments to wipe the cache.

jQuery
var $el = $("#card");
$el.data("score", 10).data("level", 2);
$el.removeData();
console.log($el.data("score"));  // undefined
console.log($el.data("level"));  // undefined
Try It Yourself

How It Works

  1. Seed. Two keys are stored on #card.
  2. Clear all. No-arg removeData() empties the cache.
  3. Reads fail. Both keys return undefined.
  4. Element stays. Only the cache was cleared, not the node.

Example 3 — Bulk Keys (Since 1.7)

Delete several named keys in one call with an array or space-separated string.

jQuery
var $el = $("#panel");
$el.data("a", 1).data("b", 2).data("c", 3);
$el.removeData(["a", "b"]);   // or .removeData("a b")
console.log($el.data("a"));   // undefined
console.log($el.data("b"));   // undefined
console.log($el.data("c"));   // 3
Try It Yourself

How It Works

  1. Three keys. a, b, and c are stored.
  2. Bulk delete. The array lists only a and b.
  3. Those go. Both return undefined.
  4. c remains. Unlisted keys are untouched.

Example 4 — data-* Can Come Back

Clearing the cache is not enough if an HTML attribute still exists.

jQuery
// <div id="item" data-role="card"></div>
var $item = $("#item");
console.log($item.data("role"));              // "card" (from attribute)
$item.removeData("role");
console.log($item.data("role"));              // "card" again (re-read)
$item.removeData("role").removeAttr("data-role");
console.log($item.data("role"));              // undefined
Try It Yourself

How It Works

  1. First read. .data("role") pulls from data-role.
  2. removeData alone. Cache cleared, but the attribute remains.
  3. Next read. jQuery can re-fetch from the attribute → "card" again.
  4. Fix. Also .removeAttr("data-role") so later reads stay empty.

Edge Cases & Pitfalls

Check these before relying on .removeData() in widgets.

attrs

data-* survives

Use .removeAttr() with .removeData() when the HTML attribute must go too.

bulk

Bulk getter caches once

The all-keys .data() getter may not re-fetch data-* after removeData between calls — official jQuery note.

detach

Detached nodes keep data

.detach() preserves the cache. Clear it explicitly if you need a clean slate.

remove

.remove() already cleans up

Deleting the element with .remove() also clears its jQuery data.

Compatibility

Browser Support

.removeData() is a core jQuery method (since 1.2.3; bulk keys since 1.7). It needs a browser DOM with jQuery loaded.

✓ jQuery 1.2.3+ · Browsers only

jQuery .removeData()

Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.

100% Browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.removeData() Browsers

Bottom line: Use .removeData() in the browser to clear the data cache. Remember: HTML data-* attributes are separate.

Analysis

Performance Notes

ApproachCostBest for
.removeData(key)Very lowClearing one option / flag
.removeData([…])Very lowResetting a small set of keys
.removeData()LowFull reset before re-init

Prefer targeted key removal when possible. Full clears are fine for teardown; avoid repeatedly wiping and re-seeding in hot loops.

Remember

Key Takeaways

  • Role: delete values from jQuery’s internal .data() cache.
  • Scope: one key, a list, or all — element stays in the DOM.
  • Attrs: HTML data-* needs .removeAttr() too.
  • Pair with: .data() to store; hasData to check.

One line: .removeData(key) clears the cache — not the HTML attribute, and not the element itself.

Frequently Asked Questions

.removeData(name) deletes one value from jQuery's internal data cache on matched elements. With no arguments, it clears all cached values. Returns the jQuery collection for chaining. Available since jQuery 1.2.3.
.data() stores values; .removeData() deletes them from the same cache. Use .data() for plugin state and .removeData() when resetting or destroying a widget.
No. It only clears jQuery's internal cache. data-* attributes stay in the DOM, so a later .data('key') may re-read data-key. Pair with .removeAttr('data-key') when you need both gone.
Yes, since jQuery 1.7. Pass an array — .removeData(['foo', 'bar']) — or a space-separated string — .removeData('foo bar').
.removeData() clears cached values but keeps the element. .remove() deletes the element from the DOM and also cleans up its data and events.
When resetting widget state, clearing stale options, or cleaning up before re-init on the same element. Elements removed with .remove() already lose their cache; detached nodes keep it until you clear it.

Next: hide()

Learn how to hide matched elements without removing them from the DOM.

hide() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery data() Method jQuery hide() Method