jQuery removeAttr() Method
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.