jQuery removeData() Method

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery removeData() — clear cached data from a DOM element
Definition

What Is jQuery.removeData()?

jQuery.removeData(element [, name]) (alias $.removeData) deletes values previously set with jQuery.data() from a DOM element (since jQuery 1.2.3). With a name, one key is removed; without a name, the whole store for that element is cleared.

Remember
$.removeData(element, name)  → delete one key
$.removeData(element)        → clear all keys

$.data(el, "test1", "VALUE-1");
$.removeData(el, "test1");
$.data(el, "test1");  // undefined

// Returns undefined — not chainable
NeedUse
Raw element + one key$.removeData(el, key)
Everyday / chaining$(el).removeData(key)
Also drop HTML data-*$(el).removeAttr("data-…")
Approach

How to Use jQuery.removeData()

Pass a DOM element, and optionally the key name to delete.

  1. Get a native element: $("#box")[0] or document.getElementById("box").
  2. Store data first with $.data(el, "key", value) (or .data()).
  3. Call $.removeData(el, "key") for one key, or $.removeData(el) to clear all.
  4. If markup data-* must go too, also call .removeAttr("data-…").
PieceRequired?Role
elementYesDOM element whose cache should be cleared
nameOptionalString key to delete; omit to clear all
Return—undefined (not chainable)

Pseudocode

Pseudocode
function removeData(element, name):
    if name is provided:
        delete store[element][name]
    else:
        delete all keys for store[element]
    return undefined

// Official demo idea:
$.data(div, "test1", "VALUE-1")
$.data(div, "test2", "VALUE-2")
$.removeData(div, "test1")   // test2 remains

// Prefer everyday: $(el).removeData("test1")
Reference

Cheat Sheet

Keep these facts handy while cleaning element data.

TopicDetail
SyntaxjQuery.removeData(element [, name])
SincejQuery 1.2.3
One key$.removeData(el, "test1")
All keys$.removeData(el)
data-*Not removed — cache only
Prefer$(el).removeData() for apps
Pair with$.data / .data()
Try it

Live Preview

Seed test1 / test2, then remove one key or clear all with $.removeData.

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

Result
$.data(el, "test1", "VALUE-1")
$.data(el, "test2", "VALUE-2")
→ test1=VALUE-1, test2=VALUE-2
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

Set test1 and test2, then remove only test1.

jQuery
var div = $("div")[0];

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

console.log($.data(div, "test1")); // undefined
console.log($.data(div, "test2")); // "VALUE-2"
Try It Yourself

How It Works

  1. Unwrap. $("div")[0] is the raw DOM element the static API needs.
  2. Store two keys. $.data writes test1 and test2 into the cache.
  3. Remove one. $.removeData(div, "test1") deletes only that name.
  4. Check. test1 is gone; test2 still returns "VALUE-2".

Example 2 — Clear All Data (No Name)

Call $.removeData(el) with only the element to wipe the store.

jQuery
var el = document.getElementById("box");

$.data(el, "a", 1);
$.data(el, "b", 2);
$.removeData(el);

console.log($.data(el, "a")); // undefined
console.log($.data(el, "b")); // undefined
Try It Yourself

How It Works

  1. Seed. Two keys (a, b) are stored on the element.
  2. No name. $.removeData(el) clears every cached value for that node.
  3. Reads fail. Both keys return undefined afterward.
  4. When to use. Handy before re-init when you want a clean slate.

Example 3 — Cache Cleared, data-* Remains

Removing cache does not delete the HTML attribute.

jQuery
// <div id="x" data-score="10"></div>
var el = $("#x")[0];

$("#x").data("score");              // 10 (from attribute into cache)
$.removeData(el, "score");
console.log($("#x").attr("data-score")); // "10" — still there
console.log($("#x").data("score"));      // may become 10 again from attr
Try It Yourself

How It Works

  1. Seed from markup. .data("score") can pull data-score into the cache.
  2. Clear cache. $.removeData(el, "score") drops the internal key only.
  3. Attribute stays. .attr("data-score") still returns "10".
  4. Re-seed risk. A later .data("score") may read the attribute again — pair with .removeAttr() when both must go.

Example 4 — $.removeData vs .removeData()

Both clear the same cache; the instance form chains.

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

// Static utility (this tutorial)
$.removeData(el, "x");
console.log($.data(el, "x")); // undefined

// Preferred instance method
$("#box").data("x", 1).removeData("x");
console.log($("#box").data("x")); // undefined
Try It Yourself

How It Works

  1. Same cache. Static and instance APIs delete the same internal key.
  2. Static shape. Needs a raw element; return value is undefined.
  3. Instance shape. Works on a collection and returns the jQuery object for chaining.
  4. Rule of thumb. Prefer .removeData() in app code; use $.removeData with raw nodes.

Example 5 — Plugin Destroy Cleanup

Clear options stored on the host element when destroying a tiny plugin.

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

$("#box").counter({ n: 5 });
$("#box").counterDestroy();
console.log($.data($("#box")[0], "counter")); // undefined
Try It Yourself

How It Works

  1. Init. counter stores options on each matched element via $.data.
  2. Destroy. counterDestroy calls $.removeData(this, "counter") per element.
  3. Natural fit. Inside .each, this is already a DOM element.
  4. Result. The key is gone — the host is ready for a fresh init.

Edge Cases & Pitfalls

Check these before relying on $.removeData() in real projects.

types

Pass a DOM element, not a jQuery object

Use $el[0] or $el.get(0). Passing the collection as element is incorrect for this static API.

attr

data-* attributes are not removed

Only the internal cache is cleared. Pair with .removeAttr("data-…") when markup must change too.

chain

Return value is undefined

You cannot chain off $.removeData(). Use .removeData() when you need chaining.

lists

Multi-key lists are an instance feature

Since jQuery 1.7, .removeData(["a","b"]) or space-separated names work on collections. The static signature takes a single optional name string.

Compatibility

Browser Support

jQuery.removeData() needs a browser DOM. It has been available since jQuery 1.2.3+ in all browsers your jQuery build supports — it is not for Node.js, Bun, or Deno without a DOM.

✓ jQuery 1.2.3+ · Browsers only

jQuery.removeData()

Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded. Prefer .removeData() on collections for everyday code.

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(element [, name]) in the browser with a DOM element. Prefer .removeData() when chaining.

Analysis

Performance Notes

ApproachCostBest for
$.removeData(el, key)O(1)Delete one known key on a raw node
$.removeData(el)O(keys)Full cleanup before re-init
$(el).removeData(key)O(n × keys)Collections / chaining

Removal is cheap compared with DOM work. Prefer named deletes when you only need one key; clear all when the element is being reset or destroyed.

Remember

Key Takeaways

  • Role: $.removeData(el [, name]) clears the jQuery data cache.
  • Args: DOM element required; name optional.
  • Prefer: .removeData() for everyday / chaining.
  • Attrs: data-* stay unless you also removeAttr.

One line: $.removeData(element [, name]) deletes cache keys on a raw DOM node — prefer .removeData() when chaining, and remove data-* separately if needed.

Frequently Asked Questions

jQuery.removeData(element [, name]) deletes previously stored jQuery data from a DOM element. With a name, only that key is removed. With no name, all values for that element are removed. It returns undefined. Added in jQuery 1.2.3.
Same cache, different call shape. jQuery.removeData(el, key) takes a raw DOM element and is not chainable. .removeData() is called on a jQuery collection, is chainable, and (since 1.7) can take an array or space-separated list of keys. Official docs recommend .removeData() for everyday code.
No. It only clears jQuery’s internal cache. Attributes like data-test1 stay in the markup. A later $(el).data("test1") may re-read the attribute into the cache. Use .removeAttr("data-test1") as well when you need the attribute gone.
jQuery.removeData(element) with no name clears the entire data store for that element (all keys set with jQuery.data / .data that live in the cache).
The API returns undefined. Unlike .removeData(), you cannot chain further jQuery methods off the static call.
When you already hold a raw DOM node (for example div = $("div")[0]) or are following official utility demos that pair jQuery.data with jQuery.removeData. New UI code should prefer .removeData() on a collection.

Next: queue()

Show, add, or replace the function queue on a DOM element.

queue() 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)

9 people found this page helpful

jQuery data() Method jQuery queue() Method