Open In App

jQuery removeAttr() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery removeAttr() method is an inbuilt method in jQuery that is used to remove one or more attributes from the selected elements.

Syntax:

$(selector).removeAttr(attribute)

Parameters:

This function accepts a single mandatory parameter attribute. It is used to specify one or more attributes that have to be removed from the selected element. Several attributes can be separated using the space.

Return Value:

This method returns the selected element with the removed attribute.

Example: The below example illustrates the removeAttr() method to remove a single attribute in jQuery.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The removeAttr Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").removeAttr("style");
            });
        });
    </script>
    <style>
        div {
            width: 300px;
            min-height: 150px;
            border: 2px solid green;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div>
        <!-- click on the any of the paragraph
        and see the change -->
        <p style="font-size:35px;font-weight:bold;
                  color:green;">
            Welcome to
        </p>
        <p style="font-size:35px;font-weight:bold;
                  color:green;">
            GeeksforGeeks!.
        </p>
        <button>
            Click Here!
        </button>
    </div>
</body>
 
</html>


Output:

jquery-25

Example 2: The below example illustrate the use of the removeAttr() method to remove more than one attributes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The removeAttr Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").removeAttr("style data-para");
            });
        });
    </script>
    <style>
        div {
            width: 300px;
            min-height: 150px;
            border: 2px solid green;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <center>
        <div>
            <!-- click on the any of the paragraph
            and see the change -->
            <p data-para="1" style="font-size:35px;font-weight:bold;
                    color:green;">
                Welcome to
            </p>
            <p data-para="2" style="font-size:35px;font-weight:bold;
                    color:green;">
                GeeksforGeeks!.
            </p>
            <button>
                Click Here!
            </button>
        </div>
    </center>
</body>
 
</html>


Output:

remAttrGIF

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads