removeChild

The removeChild() method removes a node. This method accepts a single argument, which is the node to remove. The removed node is returned:

remove first child

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p id="p1">Hello <b>World!</b></p>
        
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               
               var formerFirstChild = div.removeChild(div.firstChild); 
               document.writeln(formerFirstChild);

        </script>
    </body>
</html>

Click to view the demo

remove last child

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p id="p1">Hello <b>World!</b></p>
        
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               

               var formerLastChild = div.removeChild(div.lastChild); 
               document.writeln(formerLastChild);

        </script>
    </body>
</html>

Click to view the demo

A node removed via removeChild() is still owned by the document but doesn't have a specific location in the document.

Home
JavaScript Book
DOM

DOM Model: