revision:
The Element method removeAttribute() removes the attribute with the specified name from the element.
The difference between removeAttribute() and removeAttributeNode() : the removeAttribute() method removes an attribute, and does not have a return value. The removeAttributeNode() method removes an Attr object, and returns the removed object. The result will be the same.
element.removeAttribute(attrName)
Parameters:
attrName : required; a string specifying the name of the attribute to remove from the element. If the specified attribute does not exist, removeAttribute() returns without generating an error.
// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">
Click the button to remove the class attribute from the h4 element.
<div>
<h4 class="democlass">Hello World</h4>
<p id="remove-1">Click the button to remove the class attribute from the h4 element.</p>
<button onclick="removeFunction()">Try it</button>
</div>
<style>
.democlass { color: red;}
</style>
<script>
function removeFunction() {
document.getElementsByTagName("H4")[0].removeAttribute("class");
}
</script>
Click the button to remove the href attribute from the <a> element.
<div>
<a id="myAnchor" href="https://www.lwitters.com">A Link: Go to my website</a>
<p id="remove-2">Click the button to remove the href attribute from the a element.</p>
<button onclick="removeFunction2()">Try it</button>
</div>
<script>
function removeFunction2() {
document.getElementById("myAnchor").removeAttribute("href");
}
</script>
example: remove the target attribute from the link element with the id js:
<div>
<a href="https://www.javascripttutorial.net" target="_blank" id="js">JavaScript Tutorial</a>
</div>
<script>
let link = document.querySelector('#js');
if (link) {
link.removeAttribute('target');
}
</script>