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
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.
document.addEventListener('DOMNodeRemoved', function, true), can I pass to function the deleted element details?
event parameter for each event and event.target indicates for the relevant tag.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.
