jQuery removeData() method

The removeData() method is used to remove the data set previously using the data() method. It is an inbuilt method in jQuery. The data() method is used to attach and get data from the selected elements.

Syntax

The selector in the above syntax is the selected element whose data is to be removed. The removeData() accepts an optional parameter, which is defined as follows -

name: It is the data name need to be removed. It is an optional parameter. This parameter is used to remove the particular value. If it is not specified, the removeData() method will remove all stored data associated with the selected element.

Let's see an illustration to understand the working of the removeData() method.

Example1

It is an example of using the removeData() method. In this example, we are removing the data added by the data() method with or without using the optional value of the removeData() method.

Here, there is a paragraph element with id = "p1". There are also three buttons that add or remove the data. When user will click the first button, the data will be added to the paragraph with id = "p1". On clicking the second button, the removeData() method will trigger and remove the specific data "name" added using the data() method. And on clicking the third button, the method will remove all stored data associated with the selected element.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").data("name", "James"); 
$("#p1").data("id", "E-102"); 
$("#p1").data("designation", "Engineer"); 
$("#p2").html("Data added successfully. </br> The data after applying the <b> data() </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation")); 
	});
  $("#btn2").click(function(){
 $("#p1").removeData("name"); 
$("#p2").html("Data removed successfully. </br> The data values after applying the <b> removeData('name') </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation"));  
});
$("#btn3").click(function(){
 $("#p1").removeData(); 
$("#p2").html("Data removed successfully. </br> The data values after applying the <b> removeData() </b> method: </br> <b> Name: </b> " + $("#p1").data("name") + " </br> <b> Id: </b> " + $("#p1").data("id") + " </br> <b> Designation: </b> " + $("#p1").data("designation"));   
});
});
</script>
</head>
<body>
<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the removeData() method </h4>
<p id = "p1"> This is a paragraph with id = "p1". </p>
<p> Click the below buttons to see the effect. </p>
<button id = "btn1"> Add data </button>
<button id = "btn2"> Remove data using the optional parameter </button>
<button id = "btn3"> Remove data without using the optional parameter </button>
<p id = "p2"> </p>
</body>
</html>

Test it Now

Output