onRemove with remove and detach html

by Jools Chadwick

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="output">
<div id="divHolder">

JavaScript

var $myDiv = $("<div>");
var $output = $("#output")
var $divHolder = $("#divHolder")

function log(text)
{
  	$output.append(text+"<p>");
}

function addToDom()
{
		$divHolder.append($myDiv);
}

function addListener()
{
		$myDiv.on("remove",function(event){ // Jquery ui event
  		$output.append(event.type+" event fired!<p>");
  	});
}

function initialise()
{
		addToDom()
  	addListener()
}

function removeAndReset()
{
		$myDiv.remove(); 
  	initialise();
}

function detachAndReset()
{
		$myDiv.detach(); 
  	addToDom();
}

function replaceAndReset()
{
		$divHolder.html("");
  	initialise();
}

function removeParentAndReset()
{
		$divHolder.remove();
    $(document.body).append($divHolder);
    addListener();
}

initialise()

setTimeout(function(event){
		log("Removing div...")
		removeAndReset()
},1000)

setTimeout(function(event){
	  log("Detaching div...");
		detachAndReset()
},2000)

setTimeout(function(event){
	  log("Replacing div...");
		replaceAndReset()
},3000);

setTimeout(function(event){
	  log("Removing parent div...");
		removeParentAndReset()
},4000);