JQuery Remove Data Attribute Value Example

jQuery

Nov 16, 2020

Hi Guys,

Today,I will learn you how to remove data attribute value in jquery.This example demonstrates to you how you can remove data attribute value from HTML elements.

Using jQuery removeData() Method, you can remove data attribute value from html elements.

jQuery removeData() Method

The jQuery removeData() method can used to removes data attribute previously set on HTML elements.

Syntax

$(selector).removeData(name);

Note:

Parameter:

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.

<!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>

Output value1 before creation:

value1 after creation:

value1 after removal:

value2 after removal:

It Will help you...