code

DOM node removed

Robin Michael

Jul 12, 2023 • 1 min read

Needed to listen for the removal of a node from the Document Object Model (DOM). In this case a dynamic modal popup div that after closing should clear the cache.

window.addEventListener("DOMNodeRemoved", e => {
	console.log(`${e.target} removed`);
});

Hook the window event listener to handle the DOMNodeRemoved event, although after reading further I should probably be using the MutationObserver event, but this is not a large operation so this should be fine

Minimal example laid out here

<!DOCTYPE html>
<html>
<head>
<style>
	* {
	  margin: 0;
	  padding: 0;
	  border: none;
	  font-family: Arial, sans-serif;
	}

	body {
	  font-size: 24px;
	}
	
	.modal {
		border: 1px;
		border-style: solid;
		border-color: red;		
	}
</style>
</head>
<body>
	<div class="modal" onclick="this.remove()">
		Some text here
	</div>		
</body>
<script>
	window.addEventListener("DOMNodeRemoved", e => {
		console.log(`${e.target} removed`);
	});
</script>
</html>

Minimal example

Sign up for more like this.