jQuery.empty() Kills Event Binding On Persistent Nodes 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Test Binding</title>
 
	<!-- Linked scripts. -->
	<script type="text/javascript" src="jquery-latest.pack.js"></script>
	<script type="text/javascript">
 
		$(
			function(){
				var jP = $( "p:first" );
				var jSpan = $( "span:first" );
				var jAdd = $( "button.add" );
				var jRemove = $( "button.remove" );
 
 
				function Add(){
					jP.append( jSpan );
				}
 
				function Remove(){
					jP.empty();
				}
 
				function Bold(){
					jSpan.css( "font-weight", 800 );
				}
 
				function Unbold(){
					jSpan.css( "font-weight", 400 );
				}
 
 
				// Add the event binding on the SPAN so that
				// if you click it, it will remove itself from
				// the parent container (actually, the parent
				// will jump empty. Additionally, hook up the
				// hover (mouse over / out ) to bold text.
				jSpan
					.click( Remove )
					.hover( Bold, Unbold )
				;
 
				// Hook up the add button to add the SPAN back
				// into the paragraph.
				jAdd.click( Add );
 
				// Hook up the Remove button to clearn the P.
				jRemove.click( Remove );
 
			}
			);
 
	</script>
</head>
<body>
 
	<form>
 
		<p>
			<span>Click To Remove</span>
		</p>
 
		<button type="button" class="add">
			Add
		</button>
 
		<button type="button" class="remove">
			Remove
		</button>
 
	</form>
 
</body>
</html>

For Cut-and-Paste