Microsoft Techies: jquery dom change event listener

Wednesday, 20 August 2014

Use below code, run.
Go to html, remove one element...you will see the log.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<title>DOM Modification Event</title>
	<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">

	$(function () {

	// Bind link handlers to remove links.
	$("p#children a")
	.attr("href", "javascript:void( 0 )")
	.dblclick(
	function (objEvent) {
	// Remove link.
	$(this).remove();

	// Cancel click event.
	return (false);
	}
	)
	;

	// Listen to the body for any DOM modifications in
	// which a DOM element is removed.
	$("body").bind(
	"DOMNodeRemoved",
	function (objEvent) {
	// Append event to log display.
	$("#event-log").append(
	"<li>" +
	"Node removed: " +
	$(objEvent.target).text() +
	"</li>"
	);
	}
	);

	});

	</script>
	</head>
	<body>

	<h1>DOM Modification Event Demo
	</h1>

	<p id="children">
	<a>Remove Me 1</a>
	<a>Remove Me 2</a>
	<a>Remove Me 3</a>
	<a>Remove Me 4</a>
	</p>

	<h2>Event Log
	</h2>

	<ul id="event-log" />

	</body>
	</html>

view raw gistfile1.js hosted with ❤ by GitHub

Ref: http://www.bennadel.com/blog/1623-ask-ben-detecting-when-dom-elements-have-been-removed-with-jquery.htm