how to dynamically add/remove rows of table

learn to dynamically add and remove the rows of HTML table by using jquery

by Dhanesh Mane

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--
Learn to dynamically add/remove rows of a table using jquery
Script by - Dhanesh Mane
-->
<table id="table">
	<tr valign="top" id="row">
		<th scope="row"><label>Label</label></th>
		<td>
			<input type="text" id="field1" /> &nbsp;
			<input type="text" id="field2" /> &nbsp;
			<a href="javascript:void(0);" class="add">Add</a>
      <a href="javascript:void(0);" class="remove">Remove</a>
		</td>
	</tr>
</table>

JavaScript

$(document).ready(function(){
	$("#table").on('click','.add',function(){
    rowObj = $("#table tr:first").clone();
    $( "#table" ).append(rowObj);
	});
    $("#table").on('click','.remove',function(){
        $(this).parent().parent().remove();
    });
});