Add/Remove input fields dynamically using jquery in HTML for table

It's easy to add or remove sections in Div. But adding and removing fields for the table is a little bit different and typical. Using jquery we can easily create a row/column or remove the same from the table.

You can easily do it with the help of the below-given code:

<table class="table no-margin">
<tbody>
      <tr>
        <td> <select name="gender[]" class="form-control" required>
              <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select> </td>
        <td> <select class="form-control" name="state[]">
              <option value="All">Select State</option>
	</select></td>
        
        <td><input type="text" name="category_price[]" class="form-control" placeholder="Category Price" required></td>
      </tr>
      </tbody>

<!-- Here in the tbody "add_content" class is used to show the add more field -->

<!-- Notice here that to call/ show the add more fields the class is added to "tbody tag".
Here tbody tag works to call whole section in it so that it will not effect the UI.

<!-- Start tbody --> 

   <tbody class="add_content"> </tbody>

<!-- End tbody --> 
	<tbody>
	 <tr>
          <td colspan="3" align="center">
	<button type="button" id="addButton" class="btn btn-primary btn-sm" name="add" style="font-size:11px;" onclick="addContent(3)">Add More</button>

<!-- Here 3 is the maximum limit to add the number of sections -->
	
<button type="button" id="removeButton" class="btn btn-danger btn-sm" name="remove" style="font-size:11px;" onclick="removeButton()">Remove Field</button>
</td>
     </tr>
  </tbody>
</table>

<!-- The below script you can call in footer or also at bottom of your page -->
<script type="text/javascript">

function addContent(uplimit){
    // If you want to set the limit for adding fields you can use the below code
// If you don't want to set limit, then use can remove or comment the below "If" condition
   if( ($('.form .control-group').length+1) > uplimit-1) {
     alert("You can add maximum 3 .");
    return false;
}  
// Below is the code to add the section for table
// starting of add fields
// Always remember that there should not be extra space when you write the code in a variable for script 

var id = ($('.add_content .control-group').length + 0).toString();
var ans_opt = $('.add_content .control-group').length+1;
  $('.add_content').append('<tr class="control-group" id="control-group' + id + '"><td><select name="gender[]" class="form-control" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td><select class="form-control" name="state[]">
<option value="All">Select State</option>
</select></td>
<td><input type="text" name="category_price[]" class="form-control" placeholder="Category Price" required></td></tr>');
 
};

//ending of add fields
//starting for remove fields

$(document).ready(function () {
$("#removeButton").click(function () {
if ($('.add_content .control-group').length == 0) {
   alert("No more textbox to remove");
   return false;
}
$(".add_content .control-group:last").remove();
    });
});

// ending for remove fields code
</script>

Related Blog:

Add/Remove input fields dynamically using jquery in HTML for Div

Just copy and paste the following code in your HTML and see for yourself. Now, you have understood how you can add/remove input fields dynamically using jquery in HTML for the table.