In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > removeChild

removeChild method

Browser support:

Removes the specified child node from the current element.

The specified child node must be an immediate child of the current element.

The removed child is no longer present in the document tree, but with the reference returned by the removeChild method it can be inserted later into any element in the same document.

Use the insertBefore or appendChild method to insert it into the same document.
If you want to insert the removed node into another document, use the adoptNode or importNode method.

Syntax:

object.removeChild (childNode);

You can find the related objects in the Supported by objects section below.

Parameters:

childNode

Required. Reference to the element to remove.

Return value:

Returns the removed node object.

Example HTML code 1:

This example illustrates the use of the removeChild method:

<head>
    <script type="text/javascript">
        var anchor = null;
        function RemoveAnchor () {
            if (anchor == null) {
                anchor = document.getElementById ("myAnchor");
                anchor.parentNode.removeChild (anchor);
            }
            else {
                alert ("Insert the removed anchor first!");
            }
        }

        function InsertAnchor () {
            if (anchor) {
                var container = document.getElementById ("container");
                container.appendChild (anchor);
                anchor = null;
            }
            else {
                alert ("Remove the anchor first!");
            }
        }
    </script>
</head>
<body>
    <div id="container"><a id="myAnchor" href="#">An anchor in the container</a></div>
    <br /><br />
    <button onclick="RemoveAnchor ();">Remove the anchor from the container</button>
    <button onclick="InsertAnchor ();">Insert the removed anchor into the container</button>
</body>