dynamically adding and removing buttons with jquery
<p>New to javascript and jQuery, but I'm trying to dynamically add buttons and then remove them when they are clicked. If a button is there already (in the same class I am creating new buttons), it can be removed. If a new button gets added by the user, that button has no control. I also tried the <code>.live</code> method that was mentioned in a similar post to no avail.  Any help is appreciated. Thanks.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt; test &lt;/title&gt;
  &lt;script src="jquery-1.6.2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    /*
      $(document).ready(function(){      
        $(".btn :button").click(function(){
          $(this).remove();
      });
    */
    $(".btn :button").live("click", function(){
      $(this).remove();
    });

    function add() {
      // $(".btn").append("&lt;button&gt; new one &lt;/button&gt;");
      $("&lt;button&gt; new one &lt;/button&gt;").insertAfter(".btn");
    };
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="btn"&gt;
    &lt;button&gt; test &lt;/button&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;div class="adding"&gt;
    &lt;button onclick='add()'&gt; add &lt;/button&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
