Remove the child node of a specific element in JavaScript?

Javascript Object Oriented Programming Front End Technology

To remove the child node of a list javascript has provided removeChild() method. Using this method we can remove any list item using its index position. Let's discuss it in a nutshell.

syntax

node.removeChild(node);

Example-1

In the following example, there are 3 elements in the provided list but after removing a child there are only two elements in the list and they were displayed in the output.

Live Demo

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
   var list = document.getElementById("list");
   list.removeChild(list.childNodes[1]);
</script>
</body>
</html>

Output

Tesla
Solarcity

Example-2

In the following example, there are 3 elements in the provided list but after removing the first child using method removeChild() the other remaining two elements left were displayed as shown in the output.

Live Demo

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
   var list = document.getElementById("list");
   list.removeChild(list.childNodes[0]);
</script>
</body>
</html>

Output

Spacex
Solarcity

Vineeth.mariserla

Published on 09-Aug-2019 12:39:39

Previous Page Print Page