title: jQuery append and remove dynamic table row
body: <p>I can add many rows for a table,
  but I can't remove many rows.
  I only can remove 1 row per sequential add.</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("#addCF").click(function(){
          $("#customFields").append('&lt;tr valign="top"&gt;&lt;th scope="row"&gt;&lt;label for="customFieldName"&gt;Custom Field&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /&gt; &amp;nbsp; &lt;input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /&gt; &amp;nbsp; &lt;a href="javascript:void(0);" id="remCF"&gt;Remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
          $("#remCF").on('click',function(){
              $(this).parent().parent().remove();
          });
      });
  });
  &lt;/script&gt;
  
  &lt;table class="form-table" id="customFields"&gt;
  &lt;tr valign="top"&gt;
      &lt;th scope="row"&gt;&lt;label for="customFieldName"&gt;Custom Field&lt;/label&gt;&lt;/th&gt;
      &lt;td&gt;
          &lt;input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /&gt; &amp;nbsp;
          &lt;input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /&gt; &amp;nbsp;
          &lt;a href="javascript:void(0);" id="addCF"&gt;Add&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>You can see the code at <a href="http://jsfiddle.net/3AJcj/" rel="noreferrer">http://jsfiddle.net/3AJcj/</a></p>
  
  <p>I need help.</p>