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

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

DOMNodeRemoved event

Browser support:

9

Occurs on a node when it is removed from its parent.

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

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 ("DOMNodeRemoved", 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	Yes
Cancelable	No
Event object	MutationEvent

Actions that invoke the DOMNodeRemoved event:

Removing a node from its parent.

Example HTML code 1:

This example illustrates the use of the DOMNodeRemoved 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 ('DOMNodeRemoved', OnNodeRemoved, false);
                }
                select.options.add (option);
            }
        }

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

        function OnNodeRemoved (event) {
            var option = event.target;
            alert ("The option with label " + option.text + " has been removed from the list.");
        }
    </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>