jQuery removeProp() Method

jQuery | removeProp() Method: Learn about the jQuery removeProp() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 18, 2022

removeProp() Method

The removeProp() method is a built-in method in jQuery that helps to remove the properties of the selected elements from the web page only when the property has been defined via the prop() method of jQuery. With this either property or the number of properties can be removed. It helps to overall delete the selected element's properties and its styling. Property Name has to be specified that will help to remove that particular property from the element and leave all the other mentioned properties undisturbed. It will return an error if no property name is provided.

removeProp() Method Syntax

$('selector').removeProp(property);

It has a simple syntax, where the element is specified through its selector. It accepts only one parameter - property name. Property name consists of the name of the property that has to be removed. We can pass more than one property name over here with spaces in between each of them. This method returns the element with removed properties and values respectively.

The below example shows the implementation of the removeProp() method. When the button is clicked, it removes the property which has been specified for the element, and hence, the styling is removed from the selected element.

jQuery removeProp() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Remove Prop</h2>
    <p>Click the button to remove properties of some of the selected content.</p>
    <button id="button2">Remove Prop</button>
    <hr>
    <h3>This is sentence one.</h3>
    <hr>
    <h4></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('h3').prop({'color':'red','background-color':'grey'});
    
        $('#button2').click(function(){
            $('h3').removeProp();
            $('h4').append("Color Property has been removed.");
        })
    });    
  </script>
</html>

Output:

jQuery unwrap() Method

jQuery removeClass() Method

Comments and Discussions!

Load comments ↻