Open In App

jQuery removeAttr() Method

Last Updated : 14 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
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.



Previous Article
Next Article

Similar Reads

jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML &amp; CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery jQuery.fx.off Property
The jQuery.fx.off property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: jQuery.fx.off = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery jQuery.support Property
The jQuery.support property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: jQuery.support.propvalueParameters: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read
jQuery jquery Property
The jquery property is used to return the jQuery version number. Syntax $().jqueryExample: Return the version number. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; h1 { color: green; } &lt;/style&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt; &lt;/script&gt; &lt;script
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
How to insert a jQuery object after all paragraphs using jQuery ?
The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using &lt;span&gt; tag.Create a paragraph using &lt;p&gt; tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script that will call a function jQuery.after() which is
1 min read
Difference between jquery.size() and jquery.length
JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for "p" tag, then it will return the number of "p" tags present on our page. Syntax: $(selector).size() Return value: It returns the number of “selector” present. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;
2 min read
How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read
How is the deferred method in jquery important in relation to animate method ?
jQuery is a popular JavaScript library that provides a number of useful methods for manipulating the DOM (Document Object Model). One of these methods is the animate method, which allows you to animate the properties of an element over a given period of time. The animate() method is often used in conjunction with the Deferred() method, which allows
4 min read