jQuery removeAttr() Method

Quiz

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

This method accepts a parameter named âattributeâ which specifies the name of the attribute of an HTML element to remove.

Syntax

Following is the syntax of removeAttr() method in jQuery −

$(selector).removeAttr(attribute)

Parameters

This method accepts the following parameters −

attribute: A string representing the name of the attribute to remove.

Note: To remove multiple attributes, we need to separate the attribute names with a space.

Example 1

In the following example, we are using the removeAttr() method to remove the âstyleâ attribute from the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        $('div').removeAttr('style');
    });
});
</script>
</head>
<body>
<div style="background-color: yellow; width:220px; border: 2px solid black;">This is a div with some styling.</div>
<button>Remove Style Attribute</button>
</body>
</html>

When we click the button, the styling for the <div> element will be removed.

Example 2

In this example, we are removing multiple attributes from an âinputâ element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        $('input').removeAttr('readonly placeholder');
    });
});
</script>
</head>
<body>
<input type="text" readonly placeholder="Enter your name">
<button>Remove Attributes</button>
</body>
</html>

When we click the button, it removes multiple attributes (âreadonlyâ and âplaceholderâ) from the âinputâ element.

jquery_ref_html.htm

Print Page