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

You are here: Reference > JavaScript > client-side > event handling > events > DOMNodeRemovedFromDocument

DOMNodeRemovedFromDocument event

Browser support:

Occurs on a node when it is removed from the document.

The DOMNodeRemoved event is similar to the DOMNodeRemovedFromDocument event, but it occurs when a node is removed from an element.

For example, if a node is removed from an element that is not a part of the document, the DOMNodeRemoved event is fired but the DOMNodeRemovedFromDocument event is not. If the parent element of a node is removed from the document, the DOMNodeRemovedFromDocument event is fired but the DOMNodeRemoved event is not. You can try it with Example 2 below.

To detect when a node is added to an element or the document, use the DOMNodeInserted and DOMNodeInsertedIntoDocument events.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMNodeRemovedFromDocument", handler, useCapture);

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	MutationEvent

Actions that invoke the DOMNodeRemovedFromDocument event:

Removing a node from the document.

Example HTML code 1:

This example illustrates the use of the DOMNodeRemovedFromDocument event:

<head>
    <script type="text/javascript">
        function Init () {
                // build the list of numbers
            var select = document.getElementById ("numbers");
            for (var i = 1; i < 100; i++) {
                var option = new Option (i, i);
                if (option.addEventListener) {
                    option.addEventListener ('DOMNodeRemovedFromDocument', OnNodeRemovedFromDocument, false);
                }
                select.options.add (option);
            }
        }

        function RemoveOption () {
                // remove the first option
            var select = document.getElementById ("numbers");
            select.remove (0);
        }

        function OnNodeRemovedFromDocument (event) {
            var option = event.target;
            alert ("The option with label " + option.text + " has been removed from the document.");
        }
    </script>
</head>
<body onload="Init ();">
    <select id="numbers" size="8">
    </select>
    <br /><br />
    <button onclick="RemoveOption ();">Remove the first number from the list!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved and DOMNodeRemovedFromDocument events:

<head>
    <script type="text/javascript">
        var containerParent = null, container = null, textNode = null;

        function Init () {
            container = document.getElementById ("container");
            textNode = container.firstChild;
            containerParent = container.parentNode;

            if (textNode.addEventListener) {
                textNode.addEventListener ('DOMNodeInserted', OnNodeInserted, false);
                textNode.addEventListener ('DOMNodeInsertedIntoDocument', OnNodeInsertedIntoDocument, false);
                textNode.addEventListener ('DOMNodeRemoved', OnNodeRemoved, false);
                textNode.addEventListener ('DOMNodeRemovedFromDocument', OnNodeRemovedFromDocument, false);
            }
        }

        function RemoveContainer () {
            if (container.parentNode) {
                container.parentNode.removeChild (container);
            }
        }

        function RemoveTextFromContainer () {
            if (textNode.parentNode) {
                textNode.parentNode.removeChild (textNode);
            }
        }

        function AddContainer () {
            if (!container.parentNode) {
                containerParent.appendChild (container);
            }
        }

        function AddTextToContainer () {
            if (!textNode.parentNode) {
                container.appendChild (textNode);
            }
        }

        function OnNodeInserted () {
            alert ("The text node has been added to the container.");
        }
        function OnNodeInsertedIntoDocument () {
            alert ("The text node has been inserted into the document.");
        }
        function OnNodeRemoved () {
            alert ("The text node has been removed from the container.");
        }
        function OnNodeRemovedFromDocument () {
            alert ("The text node has been removed from the document.");
        }
    </script>
</head>
<body onload="Init ()">
    <button onclick="RemoveContainer ()">Remove the container</button>
    <button onclick="RemoveTextFromContainer ()">Remove the text form the container</button>
    <button onclick="AddContainer ()">Insert the container into the document</button>
    <button onclick="AddTextToContainer ()">Insert the text into the container</button>
    <br /><br />    
    <div id="container" style="background-color:#e0d0a0; width:300px; height:100px;">
        This is the text in the container.
    </div>
</body>