With JavaScript, We can easily remove different HTML elements.
Also Read: Create Element JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - javascript remove element</title>
</head>
<body>
<div id="container">
<ul>
<li>Nachiket</li>
<li>Monil</li>
<li>Yash</li>
</ul>
</div>
</body>
</html>Example 1
Suppose we want to remove <li> element inside <ul> elements using javascript.
Here, we remove <li> elements using javascript as follows:
<script>
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var selectli = selectul.getElementsByTagName("li")[0];
selectul.removeChild(selectli);
</script>Explanation:
- We select <div> tag using id container.
- We select <ul> tag using getElementsByTagName() function.
- We select <li> tag using getElementsByTagName() function.
- We remove first <li> element inside the <ul> tag.
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - javascript remove element</title>
</head>
<body>
<div id="container">
<ul>
<li>Nachiket</li>
<li>Monil</li>
<li>Yash</li>
</ul>
</div>
<script>
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var selectli = selectul.getElementsByTagName("li")[0];
selectul.removeChild(selectli);
</script>
</body>
</html>Note: We can insert javascript anywhere inside head or body tag. It is suitable to add javascript at the end of the body tag.
Above code remove only first <li> tag using javascript.
We can remove any <li> element by using its index number.
Syntax:
var selectli = selectul.getElementsByTagName("li")[i]; Explanation:
As explained above we can change different <li> element by setting index no [i].
Example 2:
We can also remove all <li> elements using javascript. Here, we remove all <li> elements using javascript as follows:
<script>
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var len = selectul.getElementsByTagName("li").length;
for(var i=0;i<len;i++){
var selectli = selectul.getElementsByTagName("li")[0];
selectul.removeChild(selectli);
}
</script>Explanation:
- We select <div> tag using id container.
- We select <ul> tag using getElementsByTagName() function.
- We find number of <li> tags using length function.
- We use for loop for removing all elements inside <ul> tag.
- We select <li> tag using getElementsByTagName() function.
- We remove first <li> element inside the <ul> tag and this process continues till the loop ends.
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - javascript create element</title>
</head>
<body>
<div>
<div id="container">
<ul>
<li>Nachiket</li>
<li>Yash</li>
<li>Monil</li>
</ul>
</div>
</div>
<script>
var selectdiv = document.getElementById("container");
var selectul = selectdiv.getElementsByTagName("ul")[0];
var len = selectul.getElementsByTagName("li").length;
for(var i=0;i<len;i++){
var selectli = selectul.getElementsByTagName("li")[0];
selectul.removeChild(selectli);
}
</script>
</body>
</html> 
