jquery remove data attribute Value – jQuery

remove data jquery

jquery remove data attribute from elements. This tutorial 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:

ParameterDescription
nameIt 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

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

Check This Also

Difference between AngularJS and Angular 2 Make a Mobile app in just 10 minutes With Ionic Framework Angular 9: What to Expect in New Version of Angular