<?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>