title: dynamically adding and removing buttons with jquery
body: <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>