All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Remove Attribute In jQuery

Last Updated : Mar 11, 2024

How To Remove Attribute In jQuery

In this article we will show you the solution of how to remove attribute in jquery, a selected element can be removed from one or more attributes using the removeAttr() method in jQuery.

The syntax is:

Remove Attribute ($(Selector)).removeAttr()

There is one mandatory parameter attribute for this function. Here, the removed attribute can be supplied.

The space operator can be used to separate several attributes.

The removed attribute is returned in the return value of this method.

As the name suggests, the removeAttr() function eliminates attributes from an element.

By using this method, you can remove the specified attribute from the selected element. jQuery includes this method by default.

Step By Step Guide On How To Remove Attribute In jQuery :-

<!DOCTYPE html>
<html>
   <head>
       <title>The removeAttr Method</title>
       <script src=
       "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
       </script>
       <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>
         <p style="font-size:35px;font-weight:bold;
                       color:green;">Welcome to TalkersCode</p>
         <p style="font-size:35px;font-weight:bold;
                  color:green;">TalkersCode</p>
         <button>Click Here!</button>
      </div>
   </body>
</html>
  1. Our first step is to write <HTML>, which tells the browser what version of HTML we're using. An HTML document begins with a tag.
  2. The project's heading must be described using the head> tag. Titles and final brackets differ from final brackets because they are both open, rather than closed.
  3. The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
  4. Closing the script completes the process.
  5. Then we again opened the <script> tag and then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
  6. Our next step is to create a stylesheet to define height, width, border, padding, and text alignment. The class attribute has been used to style these paragraphs, so after clicking the given button, the style of paragraphs has been removed, since the class attribute has been removed.
  7. Style and head are then closed.
  8. The <body> tag follows, which describes the content of the webpage.The website's material can be found in this part.
  9. Then we again create a stylesheet for assigning value to weight, size.
  10. Then we create a button.
  11. After that we closed program using </body></html>

Conclusion :-

The necessary parameter that designates any or even more attributes to delete from the element is called an attribute.

If we need to remove numerous attributes, we must divide their attribute names with spaces.

I hope this article on how to remove attribute in jQuery helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪