Updated April 10, 2023
Introduction to jQuery Remove Attribute
The jQuery removeAttr() function is used to remove one or more attributes from the selected elements. The jQuery removeAttr() function is a built-in function in jQuery. The jQuery removeAttr() function removes the specified attribute for each matched element. It uses JavaScript removeAttribute() function, it has the advantage that is it can call directly on a jQuery object. The prop() function also works the same as the removeAttr() function, but to remove inline onclick attribute by using the removeAttr() function not gives the desire result in Internet Explorer 8, 9, and 11, so we can use the prop() function to get the desired result.
Syntax of jQuery removeAttr() Function:
$(selector). removeAttr(attribute);Parameters:
- attribute: This is not an optional parameter. It specifies one or more attributes to remove from the selected element. The multiple attributes are separated by space.
Return Value:
The function returns the selected element with the removed attributes.
Working of jQuery removeAttr() Function
- The jQuery removeAttr() function accepts one parameter, which specifies the attribute to be removed from the selected element.
- Suppose we have “a” element in the HTML page, which has a “href” attribute (specifies the URL of the page the link goes to).
- Now we need to deactivate the link or remove the “href” attribute, so we can use the removeAttr() function as “$(“a”).removeAttr(“href”);”, which removes the “href” attribute from all the “a” elements.
Examples of jQuery Remove Attribute
Given below are the examples of jQuery Remove Attribute:
Example #1
Example of jQuery removeAttr() function to remove single attribute from the single element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery removeAttr() function </title>
<script>
function disp()
{
$("table").removeAttr("style").css({
"border": "2px solid red"
});
}
</script>
</head>
<body>
<h3> This an example of removeAttr() function: </h3>
<h2> The Vegetables and Fruits are : </h2>
<table style = "width : 80%" border = "4">
<tr>
<td> Vegetables </td>
<td> Corn </td>
<td> Mushroom </td>
<td> Broccoli </td>
<td> Cucumber </td>
</tr>
<tr>
<td> Fruits </td>
<td> Apple </td>
<td> Banana </td>
<td> Cherry </td>
<td> Pome </td>
</tr>
</table>
<p> Some more vegetables and fruits will be add soon. </p>
<button onclick = "disp()"> Remove the style attribute from table element. </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a table element that contains the style attribute. Next, the removeAttr() function is used to remove the style attribute from all the table as “$(“table”).removeAttr(“style”);”, so, it selects table element and remove the style(Width: 80%) and apply a red border, as we can see once we click on the button.
Example #2
Example of jQuery removeAttr() function to remove multiple attribute as class from the single type element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery background image property </title>
<style>
.div1 {
border : 2px solid black;
background-color : blue;
height : 150px;
width : 250px;
}
</style>
</head>
<script>
$( document ).ready( function() {
$( "div" ).click( function() {
$("div").removeAttr("class");
});
});
</script>
<body>
<h3 > This an example of removeAttr() function : </h3>
<p> Click on the box to remove the background-color, height and width attributes from div element. </p>
<br>
<div class = "div1" > This is div element. </div>
<div class = "div1" > This is div element. </div>
</body>
</html>Output:
Once we click on the first button, the output is:
In the above code, there are div elements that have a class attribute. Next, the removeAttr() function is used to remove the class attribute from all the div elements as “$(“div”).removeAttr(“class”);”, so, it selects all the div element and removes the class attribute, as we can see once we click on the button.
Example #3
Example of jQuery removeAttr() function to remove multiple attribute individually from the different types of elements.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery removeAttr() function </title>
</head>
<script>
$( document ).ready( function() {
$( "button" ).click( function() {
$("p,div").removeAttr("height align style");
});
});
</script>
<body>
<h3> This an example of removeAttr() function : </h3>
<p> Click on the button to remove the height, align and style attributes from p and div elements. </p>
<p height = "20px" align = "center" style = "color:red; background-color:yellow"> This is p element. </p>
<div height = "20px" align = "center" style = "color:red; background-color:yellow"> This is div element. </div>
<p height = "20px" align = "center" style = "color:red; background-color:yellow"> This is p element. </p>
<button> Click here. </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there are p and div elements that contain height, align and style attributes. Next, the removeAttr() function is used to remove multiple attributes (height, align and style) from all the p and div elements as “$(“p, div”).removeAttr(“height align style”);”, so, it selects all p and div elements and removes all three attributes, as we can see in the output.
Conclusion
The jQuery removeAttr() function is a built-in function in jQuery, which is used to remove one or more attributes from the selected elements.
Recommended Articles
This is a guide to jQuery Remove Attribute. Here we discuss the introduction, working of jQuery removeAttr() function and examples. You may also have a look at the following articles to learn more –
