This technique is employed to eliminate the designated attribute from the element in question. It is distinct from the removeAttributeNode function. While the removeAttributeNode function eliminates a specific Attr object, the removeAttribute function is responsible for removing the attribute that corresponds to the given name.
Syntax
element.removeAttribute(attributename)
Parameter Values
attributename: This parameter is mandatory and denotes the name of the attribute that needs to be removed from the element. In the event that the specified attribute is not present, the method will not trigger any error.
Let us understand it by using some examples.
Example1
In this illustration, there exist two paragraph elements identified by the id attributes para and para1, where para1 is a member of the class jtp. In this scenario, we will be eliminating the class attribute from these paragraph elements. To observe the results, it is necessary to click the specified HTML button.
<!DOCTYPE html>
<html>
<head>
<title>
The removeAttribute Method
</title>
<style>
.jtp {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Example of the removeAttribute() Method
</h2>
<p id = "para" class = "jtp">
This is a paragraph element.
</p>
<p id = "para1" class = "jtp">
This is second paragraph element.
</p>
<button onclick = "fun()">
Click me!
</button>
<script>
function fun() {
document.getElementById("para").removeAttribute("class");
document.getElementById("para1").removeAttribute("class");
}
</script>
</body>
</html>
Output
Upon running the aforementioned code, the resulting output will be -
Upon clicking the specified button, the subsequent output will be displayed -
Example2
In this instance, we have two div elements identified by the ids div1 and div2. We will be utilizing the style attribute to apply styles to these div elements.
In this section, we will eliminate the style attribute from the specified div elements. To observe the changes, it is necessary to click on the provided HTML button.
<!DOCTYPE html>
<html>
<head>
<title>
The removeAttribute Method
</title>
<style>
.jtp {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Example of the removeAttribute() Method
</h2>
<div id = "div1" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is first div element.
</div>
<br>
<div id = "div2" style = "background-color: lightblue; font-size: 25px; color: blue; border: 2px solid blue;">
This is second div element.
</div>
<br>
<button onclick = "fun()">
Click me!
</button>
<script>
function fun() {
document.getElementById("div1").removeAttribute("style");
document.getElementById("div2").removeAttribute("style");
}
</script>
</body>
</html>
Output
After the execution, the output will be -
After clicking the button, the output will be -
In the same way, the removeAttribute function can be utilized to eliminate attributes such as the target attribute, align attribute, readonly attribute, and numerous others.