jQuery Remove Data Attribute Value Example

jQuery remove data attribute from HTML elements; In this tutorial, you will learn how to remove data attribute value from HTML elements using the jQuery removeData() method.

How to Remove Data Attribute Value in jQuery

Using jQuery removeData() method, you can remove data attributes previously set (all) on HTML elements.

Syntax jQuery removeData() Method

To remove all data attributes or select data attributes values, you can use the following syntax with selectors:

$(selector).removeData(name)

Parameters jQuery removeData() Method

Parameter	Description
name	It is an Optional parameter. Specifies the name of data attribute to remove. If no name is specified, this method will remove all stored data attribute from the selected HTML elements

Example 1 – jquery remove data attribute value

See the example for how to remove data attribute in jquery; as shown below:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:2px; color:blue; }
  span { color:red; }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.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>

Example 2 – jquery remove all data attributes

In jQuery, you can remove all data attributes from an element using the removeData() method. Here’s an example of how you can do it:

// Select the element(s) you want to remove data attributes from
var element = $('#yourElement');

// Remove all data attributes using removeData()
element.removeData();

In this example, $('#yourElement') selects the element with the ID “yourElement”. You can replace it with a different selector based on your needs, such as a class or a different ID.

Subscribe to Blog via Email