In this tutorial we will learn How To Remove id from HTML Element with JavaScript. removeAttribute() method and getElementById() method can be used to remove id of any HTML tag.
Table of Contents
removeAttribute() method
removeAttribute() method removes or deletes the defined attribute from HTML element.
In this example removeAttribute() method is used to remove id attribute from HTML tag.
getElementById() method
getElementById() method selects or targets the HTML element based on it's id.
In this example getElementById() method is used to select the paragraph tag with it's id.
HTML Code
HTML Code is given below, in this code we have a paragraph tag with id named 'yellow' and a button tag with onclick event.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Remove id from Element</title>
<style>
#yellow
{
background-color: yellow;
}
</style>
</head>
<body>
<p id="yellow">I am a paragraph tag with id "yellow".</p>
<button onclick='removeId()'>Remove id</button>
<script src="script.js"></script>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code, the code will be executed on a click of button with the help of onclick event.
In this code getElementById() method is used to select the paragraph tag and then removeAttribute() method is used to remove it's id.
<script>
function removeId()
{
var element = document.getElementById('yellow');
element.removeAttribute('id');
}
</script>
We can also use id property to remove the id and replace it with nothing.
<script>
function removeId()
{
var element = document.getElementById('yellow');
element.id='';
}
</script>
This will not remove the id attribute it will only remove it's value. That is why this method is not recommended because it is important that id attribute has some value, it can't be empty.
Demo
Video Tutorial
Watch video tutorial on How To Remove id from HTML tag with JavaScript.