jQuery removeAttr() method

As its name implies, the removeAttr() method is used to remove attributes from the element. This method is used to remove the specified attribute from the selected element. It is an inbuilt method in jQuery.

Syntax

This method requires a mandatory parameter, which is defined as follows.

attribute: It is the required parameter that specifies one or more attributes to remove from the element. We have to separate the attribute names with space if we have to remove multiple attributes.

Let's see some examples of using the removeAttr() method.

Example1

In this example, there are some paragraph elements with class = "jtp". We are applying the removeAttr() method on the paragraph elements with the corresponding class name to remove the class attribute. Here, we are removing a single class attribute from the paragraph elements.

As we have styled these paragraphs using the class name, so in the output, we can see that after clicking the given button, the style of paragraphs is removed due to removing the class attribute.

<!DOCTYPE html>
<html>
<head>
<title>
jQuery removeAttr() method
</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$("button").click(function() {
$("p").removeAttr("class");
});
});
</script>
  <style>
.jtp {
color: red;
background-color: yellow;
border: 2px dashed blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the jQuery removeAttr() Method
</h2>

<p id = "para" class = "jtp">
This is first paragraph element.
</p>
<p id = "para1" class = "jtp">
This is second paragraph element.
</p>
<p> Click the following button to see the effect. </p>

<button>
Click me
</button>

</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we remove multiple attributes from the element. Here, there are two div elements with id = "d1", id = "d2" that are related to the same class class = "jtp".

As we have styled these div elements using both class and id attributes, so in the output, we can see that after clicking the given button, the style of elements is removed due to the removing of their class and id attributes.

<!DOCTYPE html>
<html>
<head>
<title>
jQuery removeAttr() method
</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$("button").click(function() {
$("div").removeAttr("id class");
});
});
</script>
  <style>
.jtp {
color: red;
font-size: 25px;
margin: 10px;
}
#d1{
border: 2px solid blue;
background-color: lightgreen;
}
#d2{
border: 2px dashed blue;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the jQuery removeAttr() Method
</h2>

<div id = "d1" class = "jtp">
This is first div element.
</div>
<div id = "d2" class = "jtp" >
This is second div element.
</div>
<p> Click the following button to see the effect. </p>

<button>
Click me
</button>

</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -