<?xml version="1.0">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Delayed remove of an element</title>
<script type="text/javascript">
var parentNode;
var elementId;
function timedRemove()
{
var t = setTimeout('removeElement()', 500);
t = setTimeout('insertElement()', 2000);
}
function removeElement()
{
var element = document.getElementById('element-to-remove');
elementId = element.id;
parentNode = element.parentNode;
parentNode.removeChild(element);
}
function insertElement()
{
var newElement = document.createElement('p');
newElement.setAttribute('id', elementId);
newElement.innerHTML = 'new element';
parentNode.appendChild(newElement);
}
</script>
</head>
<body>
<form>
<input id="buttonDelete" type="button" value="element will be removed in half a second"
onclick="timedRemove()"/>
</form>
<p id="element-to-remove">element</p>
</body>
</html>