# .removeData()

## removeData ( name ) Returns: jQuery version added: 1.2.3

- name
  Type: String
  A string naming the piece of data to delete.

## removeData ( list ) Returns: jQuery version added: 1.7

- list
  Type:
  An array or space-separated string naming the pieces of data to delete.

Description: Remove a previously-stored piece of data.

The `.removeData()` method allows us to remove values that were previously set using `.data()`. When called with the name of a key, `.removeData()` deletes that particular value; when called with no arguments, all values are removed. Removing data from jQuery's internal `.data()` cache does not affect any HTML5 `data-` attributes in a document; use `.removeAttr()` to remove those.

When using `.removeData("name")`, jQuery will attempt to locate a `data-` attribute on the element if no property by that name is in the internal data cache. To avoid a re-query of the `data-` attribute, set the name to a value of either `null` or `undefined` (e.g. `.data("name", undefined)`) rather than using `.removeData()`.

As of jQuery 1.7, when called with an array of keys or a string of space-separated keys, `.removeData()` deletes the value of each key in that array or string.

As of jQuery 1.4.3, calling `.removeData()` will cause the value of the property being removed to revert to the value of the data attribute of the same name in the DOM, rather than being set to `undefined`.

## Examples:

#### Example: Set a data store for 2 names then remove one of them.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        margin: 2px;
        color: blue;
      }
      span {
        color: red;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <div>value1 before creation: <span></span></div>
    <div>value1 after creation: <span></span></div>
    <div>value1 after removal: <span></span></div>
    <div>value2 after removal: <span></span></div>

    <script>

    $( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
    $( "div" ).data( "test1", "VALUE-1" );
    $( "div" ).data( "test2", "VALUE-2" );
    $( "span:eq(1)" ).text( "" + $( "div").data( "test1" ) );
    $( "div" ).removeData( "test1" );
    $( "span:eq(2)" ).text( "" + $( "div" ).data( "test1" ) );
    $( "span:eq(3)" ).text( "" + $( "div" ).data( "test2" ) );

    </script>

    </body>
    </html>

#### Demo: