jQuery Remove Data Attribute Value Example

June 24, 2022June 24, 2022 Rabiya 0 Comments

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

How to Remove Data Attribute Value in jQuery

Use jQuery removeData() method to removes data attribute previously set on HTML elements.

Syntax jQuery removeData() Method

$(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 for – 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>