jQuery removeProp() method

The removeProp() method is used to remove the property added by the prop() method. It is an inbuilt method in jQuery. The prop() method in jQuery adds a property to the selected element.

The removeProp() method should not be used to remove the HTML attributes such as id, class, etc. To remove such attributes, we can use the removeAttr() method.

Syntax

This method accepts a single parameter, which is defined as follows -

property: It is the mandatory parameter. It specifies the property name that needs to remove.

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

Example

It is a simple example of using the removeProp() method. In this example, there is a paragraph element with id = "p1". There are also two buttons named as Add Property and Remove Property. When user will click the Add Property button, the properties will be added to the paragraph with id = "p1". Whereas, on clicking the Remove Property button, the removeProp() method will trigger and remove the properties added using the prop() method.

<!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(){
var $x = $("#p1");
var $y = $("#p2");
    $x.prop("color", "FF0000");
	$x.prop("font-size", "1.6em");
	$x.prop("border", "2px solid black");
	$y.html(" </br> <b> The property values are: </b> </br> color: " + $x.prop("color") + " </br> font-size: " + $x.prop("font-size") + " </br> border: " + $x.prop("border"));
	});
  $("#btn2").click(function(){
  var $x = $("#p1");
    var $y = $("#p2");    
	 $x.removeProp("color");
	  $x.removeProp("font-size");
	   $x.removeProp("border");
    $y.html(" </br> <b> Property values after applying the removeProp() method </b> </br> color: " + $x.prop("color") + " </br> font-size: " + $x.prop("font-size") + " </br> border: " + $x.prop("border"));
  });
});
</script>
</head>
<body>
<h4> It is an example of using the removeProp() method </h4>
<p id = "p1"> This is a paragraph </p>
<p> Click the <b> Add </b> button to add the properties to the above paragraph using the <b> prop() </b> method. </p>
<p> Click the <b> Remove </b> button to remove the properties added by the prop() method. </p>
<button id = "btn1"> Add Property </button>
<button id = "btn2"> Remove Property </button>
<p id = "p2"> </p>
</body>
</html>

Test it Now

Output