title: Delete dynamically-generated table row using jQuery
body: <p>the code below add and remove table row with the help of Jquery 
   the add function works fine but the remove only work if I remove the <strong>first row</strong> </p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;button type="button"  class="removebutton" title="Remove this row"&gt;X&lt;/button&gt;
  &lt;/td&gt; 
           &lt;td&gt;&lt;input type="text" id="txtTitle" name="txtTitle"&gt;&lt;/td&gt; 
           &lt;td&gt;&lt;input type="text" id="txtLink" name="txtLink"&gt;&lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button id ="addbutton"&gt;Add Row&lt;/button&gt;
  </code></pre>
  
  <p>and the script</p>
  
  <pre><code> var i = 1;
  $("#addbutton").click(function() {
    $("table tr:first").clone().find("input").each(function() {
      $(this).val('').attr({
        'id': function(_, id) {return id + i },
        'name': function(_, name) { return name + i },
        'value': ''               
      });
    }).end().appendTo("table");
    i++;
  });
  
  $('button.removebutton').on('click',function() {
      alert("aa");
    $(this).closest( 'tr').remove();
    return false;
  });
  </code></pre>
  
  <p>can anyone give me the explanation why  I can only remove the first row ?
  thank so much </p>