title: jQuery delete table row by dynamic id
body: <p>I have the following code</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="text" maxlength="20" id="nameText"&gt;&lt;/input&gt;
      &lt;button type="button" id="add"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;table id="form"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery part</p>
  
  <pre><code>var rowNum = 0;
  
  $('#add').click(function() {
      var name = $('#nameText').val();
      rowNum ++;
      var row = '&lt;tr id="row' + rowNum + '"&gt;'
              + '&lt;td&gt;' + name 
              + '&lt;button type="button" id="deleteRow' + rowNum + '"&gt;Delete&lt;/button&gt;'
              + '&lt;/td&gt;'
              + '&lt;/tr&gt;';
  
      $(row).insertAfter($("#form &gt; tbody &gt; tr:last"));
      $('#deleteRow' + rowNum).click(function () {
          $('#row' + rowNum).remove();
      });
  });
  </code></pre>
  
  <p>This will dynamically add table rows when you click "Add" button, and I want to delete row by id, but it only delete the last row, how can I fix it?</p>
  
  <p><strong>jsfiddle</strong>: <a href="http://jsfiddle.net/sgs603cm/" rel="nofollow">http://jsfiddle.net/sgs603cm/</a></p>