Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to remove an attribute from each matched elements using jQuery ?

  • Last Updated : 28 Nov, 2021

In this article, we will learn how to remove an attribute from each of the matched elements using JQuery. JQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto of “Write less, do more.” It simply means that you can achieve your goal by just writing a few lines of code.

Approach: An attribute is used to provide extra information about the element. It is always specified in the starting tag. We can easily remove attributes from the page by using removeAttr() method in JQuery. This method is used to remove an attribute from each of the matched elements.

Syntax:

selector.removeAttr( name )

Parameters: This method has a single parameter as mentioned above and described below.

  • name: This is the name of the property that has to be removed from the page.

The below example will help to understand the approach better.

Example: In this example, we will be using removeAttr() method to remove an attribute from each of the matched elements.

HTML




<html>
  
<head>
    <script type="text/javascript" 
            src=
    </script>
    <style>
        body {
            text-align: center;
        }
    </style>
  
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <table border="5px">
        <tr>
            <td>This is first table</td>
        </tr>
    </table>
  
    <table border="6px">
        <tr>
            <td>This is second table</td>
        </tr>
    </table>
  
    <table border="7px">
        <tr>
            <td>This is third table</td>
        </tr>
    </table>
  
    <button id="btn">Click to remove</button>
  
    <script type="text/javascript">
        $("#btn").click(function () {
            $("table").removeAttr("border");
        });
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!