Javascript DOM HTML Node removeChild Method

Introduction

Remove the first <li> element from a list.

The <li> elements inside <ul> are not indented.

If they were, the first child node of <ul> would be a text node

Click the button to remove the first item from the list.

View in separate window 

<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>CSS</li><li>HTML</li><li>Java</li></ul>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {/*from  ww  w.  j a  v a 2s . co m*/
  var list = document.getElementById("myList");
  list.removeChild(list.childNodes[0]);
}
</script>

</body>
</html>

The removeChild() method removes a specified child node of the specified element.

The removeChild() method returns the removed node as a Node object, or null if the node does not exist.

The removed child node is no longer part of the DOM.

We can use the appendChild() or insertBefore() method to insert the removed node into the same document.

To insert it to another document, use the document.adoptNode() or document.importNode() method. 

node.removeChild(node);

Parameter Values

Parameter TypeDescription
node Node object Required. The node object you want to remove

The removeChild() method return a Node object representing the removed node, or null if the node does not exist.




PreviousNext

Related