How to get deleted DOM elements with Javascript?

Question

I'm wondering if there is any way to get 'history' of deleted elements or window objects in the DOM?

For example, script tag that delete himself during the page loading.

<script id='deleteme'>
document.getElementById('deleteme').remove()
</script>

Is there any way to get this script tag after removing it from the DOM?

Thanks

I don't think there is apart from listening to the DOM for changes and keep track of deletions yourself. To listen for changes: http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener. Note however that all changes prior to your listener being attached will be lost. — slebetman, Jan 18 '16 at 08:21
You can catch your element in a variable to put it back if you want to. — Mr. Alien, Jan 18 '16 at 08:24
@slebetman That answer is deprecated. See: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events. — , Jan 18 '16 at 08:25
@GenericProdigy: The deprecated answer points to a more modern answer (see answer number 2) — slebetman, Jan 18 '16 at 08:46
@slebetman: Do you mean MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)? It's not fully supported in Opera yet and still doesn't allow a way to get the "history" without pre-emptively coupling up observers. — , Jan 18 '16 at 08:53

Seshu Kumar Alluvada · Answer 1 · 2016-01-18T08:35:24.793

2

DomNodeRemoved event is fired when an element in the dom structure is deleted. It can be used to capture the information that was removed but you would have to manually maintain the history.

Refer here for some examples on how to use it.

Edit

Mutation Events are deprecated and Mutation Observers are a replacement for the same. Mutation Observers can be used to observe the changes to the DOM structure at any level in the DOM and execute a callback when changes are detected. David Walsh's blog explains the same.

edited Jan 18 '16 at 08:35

answered Jan 18 '16 at 08:22

Seshu Kumar Alluvada

562
3
7

How can I get the deleted element details? For example, if I will perform `document.addEventListener('DOMNodeRemoved', function, true)`, can I pass to function the deleted element details? – Dan Jan 18 '16 at 09:03
Please see my edit to the answer. It's not advisable to use Mutation Events as they are deprecated. Please use Mutation Observers. I have a link to a blog that details how to use obseevers. – Seshu Kumar Alluvada Jan 18 '16 at 09:05
Thanks. I got it. The function got `event` parameter for each event and `event.target` indicates for the relevant tag. – Dan Jan 18 '16 at 09:14

score 1 · Answer 2 · answered Jan 18 '16 at 08:32

This is horrible, and mutation observers are a much better idea, but you can always hot-patch JavaScript :)

(function() {
  window.removeHistory = [];
  var oldRemove = HTMLElement.prototype.remove;
  HTMLElement.prototype.remove = function() {
    removeHistory.push({
      element: this,
      parent: this.parentNode,
      timestamp: new Date()
    })
    oldRemove.apply(this, arguments);
  };
})();

document.getElementById('first').remove();
document.getElementById('second').remove();
console.log(removeHistory);

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<div id="parent">
  <p id="first">First</p>
  <p id="second">Second</p>
</div>

This is for exercise and/or quick-and-dirty debugging only. Do not use this is production code, or you will be eaten by a grue.

How to get deleted DOM elements with Javascript?

2 Answers2