jQuery append and remove dynamic table row

Question

I can add many rows for a table, but I can't remove many rows. I only can remove 1 row per sequential add.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){     $("#addCF").click(function(){         $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>');         $("#remCF").on('click',function(){             $(this).parent().parent().remove();         });     }); }); </script>  <table class="form-table" id="customFields"> <tr valign="top">     <th scope="row"><label for="customFieldName">Custom Field</label></th>     <td>         <input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp;         <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp;         <a href="javascript:void(0);" id="addCF">Add</a>     </td> </tr> </table> 

You can see the code at http://jsfiddle.net/3AJcj/

I need help.

Answer 1

You only can have one unique ID per page. Change those IDs to classes, and change the jQuery selectors as well.

Also, move the .on() outside of the .click() function, as you only need to set it once.

http://jsfiddle.net/samliew/3AJcj/2/

$(document).ready(function(){     $(".addCF").click(function(){         $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');     });     $("#customFields").on('click','.remCF',function(){         $(this).parent().parent().remove();     }); }); 

Answer 2

You can dynamically add and delete table rows like this in the image using jQuery..

Here is html part...

<form id='students' method='post' name='students' action='index.php'>      <table border="1" cellspacing="0">       <tr>         <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>         <th>S. No</th>         <th>First Name</th>         <th>Last Name</th>         <th>Tamil</th>         <th>English</th>         <th>Computer</th>         <th>Total</th>       </tr>       <tr>         <td><input type='checkbox' class='case'/></td>         <td>1.</td>         <td><input type='text' id='first_name' name='first_name[]'/></td>         <td><input type='text' id='last_name' name='last_name[]'/></td>         <td><input type='text' id='tamil' name='tamil[]'/></td>         <td><input type='text' id='english' name='english[]'/> </td>         <td><input type='text' id='computer' name='computer[]'/></td>         <td><input type='text' id='total' name='total[]'/> </td>       </tr>     </table>      <button type="button" class='delete'>- Delete</button>     <button type="button" class='addmore'>+ Add More</button>     <p>     <input type='submit' name='submit' value='submit' class='but'/></p> </form> 

Next need to include jquery...

<script src='jquery-1.9.1.min.js'></script> 

Finally script which adds the table rows...

<script>   var i=2;   $(".addmore").on('click',function(){     var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";         data +="<td><input type='text' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' name='tamil[]'/></td><td><input type='text' id='english"+i+"' name='english[]'/></td><td><input type='text' id='computer"+i+"' name='computer[]'/></td><td><input type='text' id='total"+i+"' name='total[]'/></td></tr>";         $('table').append(data);         i++; }); </script> 

Also refer demo & tutorial for this dynamically add & remove table rows