❮❮ PREV NEXT ❯❯

HTML METHODS - removeProp()

The removeProp() method in JQuery is used to remove a property from an HTML element that is added by the prop() method.

Note : There is a prop() method that is used to add properties to an HTML file.

Example :

<html>
    <head>
    	<title> My First Programme </title>
        
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p></p>
    	
    	<button class = "addBtn"> Click to add Property </button>
    	<button class = "removeBtn"> Click to remove Property </button>
    		  
      	<script>
      
      		$('button.addBtn').click( function() {
				$('p').prop("background-color", "violet");
                $("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
			});
			
			$('button.removeBtn').click( function() {
				$('p').removeProp("background-color");
                $("p").text("The background-color property is removed and is : " + $("p").prop("background-color"));
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have two <button> elements,

<button class = "addBtn"> Click to add Property </button>
<button class = "removeBtn"> Click to remove Property </button>

On click of the <button> with class name addBtn,

<button class = "addBtn"> Click to add Property </button>

The below JQuery statement is executed,

$('button.addBtn').click( function() {
	$('p').prop("background-color", "violet");
	$("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
});

So, we have used the prop() method to set the background-color property to violet,

$('p').prop("background-color", "violet");

And on the next button click,

<button class = "removeBtn"> Click to remove Property </button>

The below JQuery statement is executed,

$('button.removeBtn').click( function() {
	$('p').removeProp("background-color");
	$("p").text("The background-color property is removed and is : " + $("p").prop("background-color"));
});

And we have used the removeProp() method to remove the property background-color added using the prop().

$('p').removeProp("background-color");

❮❮ PREV NEXT ❯❯