Menu Close

How to remove the attribute from an HTML element in jQuery?

Remove the attribute Using jQuery

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

Example 1: Below example when you click the “Remove Style” button it will remove the style attribute from the link.

<!DOCTYPE html>
<html> 
    <head>
        <title>jQuery removeAttr Method</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>  
    <body>
        <section>
            <div class="container text-center">
                <h1>jQuery removeAttr Method</h1>
                <div style="padding:20px;border:1px solid #888;width: 300px;margin:20px auto;">
                    <p style="font-size:30px;">Welcome to</p>
                    <p style="font-size:30px;">Codeamend!</p>
                    <button class="btn btn-primary">Remove Style</button>
                </div>
            </div>
        </section>
        
        <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>
    </body>
</html> 

Example 2: Below example when you click the “Remove Link” button it will remove the href attribute from the link.

<!DOCTYPE html>
<html> 
    <head>
        <title>jQuery removeAttr Method</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>  
    <body>
        <section>
            <div class="container text-center">
                <h1>jQuery removeAttr Method</h1>
                <div style="padding:20px;border:1px solid #888;width: 300px;margin:20px auto;">
                    <button class="btn btn-primary remove-attr">Remove Link</button><br>
                    <a href="https://codeamend.com/">codeamend</a>
                </div>
            </div>
        </section>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $(".remove-attr").click(function(){            
                    $("a").removeAttr("href");
                });
            });
        </script>
    </body>
</html> 
Posted in HTML, jQuery

You can also read...