Is there a way to be notified by the DOM when an element is removed?

Question

My initial research has come up empty and I am not sure if this is possible. I am looking for a solution using straight up javascript. I cannot use jQuery due to constraints of the device. Basically, I want to attach an event for when an element is removed and provide a function to execute.

[EDIT]
We do the DOM manipulation via a function call. Right now, we currently don't traverse down the whole tree to remove every single element. We only remove the parent for instance. I was hoping to provide a shortcut by attaching to an event, but I guess I will have to go the long way around and provide the additional logic in the function. The reason I need this, is because we need to be able to run cleanup operations on the DOM when specific elements are removed.

Right now the priority is only Opera support, but I would like to accomplish a cross browser solution.

Answer 1

If you're interested in cross-browser support, "on element removal" isn't an HTML 4 event, so I think you might be out of luck here. However, I think you'd have some luck if you adopted an alternate strategy: since you're doing the removing, constrain the ways in which the element can be removed. Then simply invoke the callback there instead of in an event handler.

Answer 2

The straight answer is no. The current DOM implementations provide no event that you can hook to watch for DOM changes.

Perhaps you could add to your question why you need this, there may be alternatives. For example if the DOM element is removed by code could that code be modified to participate in an observer pattern?

Answer 3

You have something called DOM mutation events defined:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Currently this only works in Firefox, not on Internet Explorer.

Answer 4

I'd like to know how the nodes are being removed if you aren't the one doing it.

How soon after the removal do you need to know? Can you just check to see if it's gone once a second?

Answer 5

I'm no DOM expert, but could you override the removeChild method?

If it works, it's not a perfect solution, since the are other ways for a DOM element to go away (setting innerHTML on one of its ascendants, for instance).

You could also store, at the parent, a child count. Then compare that count to the actual child count. Of course, that would require polling, not an event.

Answer 6

I'm not massively strong in Javscript, but quickly mocked up the following code and it worked in Firefox. You may be lucky to get it working in other browsers.

<ul id="main">
    <li id="e1">Item 1</li>
    <li id="e2">Item 2</li>
</ul>

<script type="text/javascript">
var main = document.getElementById('main');
main.origRemoveChild = main.removeChild;
main.removeChild = function(child) {
    alert('Removing element ' + child.tagName + ' with id=' + child.id);
    this.origRemoveChild(child);
}
var e1 = document.getElementById('e1');
main.removeChild(e1);
</script>

Since you updated your question I have another solution here:

removeFromDOM(e) {
    for (var i = 0; i < e.childNodes.length; ++i) {
        var child = e.childNodes[i];
        removeFromDOM(child);
        if (typeof child.onremove == 'function') {
            child.onremove();
        }
        e.removeChild(child);
    }
}

This will recursively delete every nested node. Before deleting it will try to execute onremove method is present. Hope that helps.