Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to remove all attributes of an HTML element using jQuery ?

  • Last Updated : 30 Sep, 2021

In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use removeAttributeNode() method

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$.fn.removeAllAttributes = function() {
    return this.each(function() {
        $.each(this.attributes, function() {
            this.ownerElement.removeAttributeNode(this);
        });
    });
};

$('textarea').removeAllAttributes();

In the below example, we are creating a textarea element containing some attributes like – rows, cols, id, and name. When we apply the above code on textarea element, all attributes will be removed.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to remove all attributes of 
        an HTML element using jQuery?
    </title>
  
    <script src=
    </script>
  
    <style>
        #txtarea {
            font-size: 18px;
            background-color: green;
        }
    </style>
  
    <script>
        $(document).ready(function() {
            $("#position").on('click', function() {
                $.fn.removeAllAttributes = function() {
                    return this.each(function() {
                        $.each(this.attributes, function() {
                            this.ownerElement.removeAttributeNode(this);
                        });
                    });
                };
                $('textarea').removeAllAttributes();
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            How to remove all attributes of 
            an HTML element using jQuery?
        </h3>
  
        <input type="button" id="position" 
            value="Remove All Attributes" 
            style="padding: 5px 10px;">
        <br><br>
  
        <textarea rows="7" cols="35" id="txtarea" 
            name="comment">Welcome to GeeksforGeeks
        </textarea>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :