Ask Ben: Detecting When DOM Elements Have Been Removed With jQuery

<!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 type="text/javascript" src="jquery-1.3.2.js"></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 );
					}
					)
			;
 
			// Bind link hanlders to remove parent.
			$( "p#nested a" )
				.attr( "href", "javascript:void( 0 )" )
				.dblclick(
					function( objEvent ){
						// Remove parent.
						$( this.parentNode ).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>
 
	<p id="nested">
		Child Action: <a>Remove my parent</a>
	</p>
 
	<h2>
		Event Log
	</h2>
 
	<ul id="event-log" />
 
</body>
</html>

For Cut-and-Paste