title: Examine Element That is Removed onblur
body: <p>So I have an element that is dynamically added to the page with Javascript. After it is added, it is granted focus.</p>
  
  <p>I want to examine the element in chrome dev tools, but the issue is that it has a onblur event handler that removes it from the DOM. So basically when I click on the dev tools to select the element, it is removed. An example can be seen here:</p>
  
  <p><a href="http://jsfiddle.net/MSZEx/">http://jsfiddle.net/MSZEx/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;button id="the_button"&gt;Click me to show field&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#the_button").click(function() {
      $elt = $("&lt;input&gt;").attr("type", "text").attr("id", "text_field");
      $("#container").append($elt);
      $elt.focus();
      $elt.blur(function() {
         $elt.remove(); 
      });
  });
  </code></pre>
  
  <p>In the example I would like to be able to examine the input element that shows up once the button is clicked.</p>