CODEWITHSUNDEEP
javascript
Dale Ragan
Dale Ragan

Reputation: 18270

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

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.

Upvotes: 0

Views: 680

Answers (6)

Michał Niedźwiedzki
Michał Niedźwiedzki

Reputation: 12939

I'm not strong in Javascript, 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.

Upvotes: 0

John Feminella
John Feminella

Reputation: 311735

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.

Upvotes: 2

richardtallent
richardtallent

Reputation: 35404

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.

Upvotes: 0

Nosredna
Nosredna

Reputation: 86336

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?

Upvotes: 0

Praveen Angyan
Praveen Angyan

Reputation: 7265

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.

Upvotes: 3

AnthonyWJones
AnthonyWJones

Reputation: 189535

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?

Upvotes: 1

Related Questions