Add or Remove Table Rows Using jQuery

When you create any dynamic HTML website than in website must save records. For that you use HTML tables for display records from database or from some array variable. Sometimes in table row data should be added dynamically by input text without no limit and not sure about how much row add or remove. That time you can use buttons to add and remove rows. For that see below code to add and remove table rows using jQuery.
For implement that code or integrate to any table first create HTML table with basic table tags.

<table cellpadding="1" id="tabledata" cellspacing="1" width="100%" border="1">
<thead>
<tr>
    <th>NO</th>
    <th>NAME</th>
    <th>EMAIL</th>
    <th>REMOVE</th>
</tr>
</thead>
<tbody>
<tr>
    <td align="center">1</td>
    <td align="center"><input type="text" /></td>
    <td align="center"><input type="email" /></td>
    <td align="center"><input type="button" class="removebutton" value="REMOVE" /></td>
</tr>
</tbody>
<tfoot>
<tr>
    <td colspan="4" align="right"><input type="button" class="addnewbutton" value="ADD NEW" /></td>
</tr>
</tfoot>
</table>

Now you want to set add and remove row data by click on `Add New` and `Remove` button, then use jQuery for that put live latest jQuery link from https://jquery.com/download on your page as below.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Add new table row using jQuery

For an added new row with name and email id input text when click on add a new button on above table, then adds jQuery event as script on `Add New` button click. for that assign class `addnewbutton` for that button as above table and script as below.

<script>
$(document).on('click', '.addnewbutton', function (){ //Add new row below Add New button row
$(this).closest('tr').before('<tr>'+
    '<td align="center">1</td>'+
    '<td align="center"><input type="text" /></td>'+
    '<td align="center"><input type="email" /></td>'+
    '<td align="center"><input type="button" class="removebutton" value="REMOVE" /></td>'+
    '</tr>');
     return false;
 });
</script>

Add row with number

Here for adding new row you want to also add an auto increment number for count total records than using jQuery find total table rows and then add an extra row of that table according to the next increment number. For that add `tabledata`as table id as above table and script as below.

<script>
$(document).on('click', '.addnewbutton', function (){
var totaltr = ($("#tabledata").find('tr').length) - 2; //For calculation of data row after remove table head and footer
$(this).closest('tr').before('<tr>'+
    '<td align="center">'+(totaltr + 1)+'</td>'+ //Add next increment value for new row
    '<td align="center"><input type="text" /></td>'+
    '<td align="center"><input type="email" /></td>'+
    '<td align="center"><input type="button" class="removebutton" value="REMOVE" /></td>'+
    '</tr>');
     return false;
 });
</script>

Remove table row using jQuery

For removing any row and its data when click on remove button in a table than add jQuery remove function use. For that create new class `removebutton` for each new Remove button and remove table row script as below.

<script>
  $(document).on('click', '.removebutton', function (){
      $(this).closest('tr').remove();
 });
</script>