anchor.diff:     <p>Demonstrates controls that are added or removed after an async call.</p>
   
      <form >
  -       <button autocomplete="off" type="button" id="start" onclick="onClick()" >Remove</button>
  +       <button autocomplete="off" type="button" id="btn" onclick="onClick()" >Remove</button>
          <div id="checkbox">
   	  <input type="checkbox" id="checkbox" > A checkbox
          </div>
  
positive.code: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  <script>
  function onClick (){
     var start = $('#start');
     start.attr("disabled",true);
     clearMessage();
     start.after("<div id='loading'>Wait for it... <img src='/img/ajax-loader.gif'></div></br>");
        setTimeout(function() {
  	toggleControls();
        } , 3000 );
  };
  
  function clearMessage() {
  
negative.code:     }
  };
  
  function showDelay() {
     $('#btn').after("<div id='loading'>Wait for it... <img src='/img/ajax-loader.gif'></div></br>");
  };
  
  function pauseThenToggleControls() {
     setTimeout(function() {
  	toggleControls();
     } , 3000 );
  };
  
  function toggleControls() {
    var btn = $('#btn').first();
    var check = $('#checkbox').first();
    var load = $('#loading');
    if ( btn.text() == "Remove") {
         check.remove();
         btn.text("Add");
         btn.after("<p id='message'>It's gone!</p>");
         btn.attr("disabled", false);
         load.hide();
    }else{
         btn.text("Remove");
         btn.after("<div id='checkbox'><input type='checkbox' id='checkbox'> A checkbox </div>");
         btn.after("<p id='message'>It's back!</p>");
         btn.attr("disabled", false);
         load.hide();
      }
   };
  