How to create dynamically add row and delete

Author Name : Md. Shahab uddin Category Name : Jquery & Ajax

How to create dynamically add row and delete

HTML Code

<div class="table-responsive" style="margin-top: 10px">
<input id="add-invoice-item" class="btn btn-info" name="add-new-item" onclick="addInputField('addinvoiceItem');" value="Add New" type="button" style="margin: 0px 15px 15px;">
<table class="table table-bordered table-hover" id="normalinvoice">
<thead>
<tr>
<th class="text-center"><?php echo display('date') ?></th>
<th class="text-center"><?php echo display('assesment') ?></th>
<th class="text-center"><?php echo display('suggestion') ?></th>
<th class="text-center"><?php echo display('notes') ?> </th>
<th class="text-center"><?php echo display('action') ?> </th>
</tr>
</thead>
<tbody id="addinvoiceItem">
<tr>
<td>
<input name="follow_up_date[]" id="follow_up_date" class="form-control datepicker1" value="" min="1">
</td>
<td>
<input name="assesment[]" value="" id="assesment" class="assesment1 form-control" type="text">
</td>
<td>
<input name="suggestion[]" onkeyup="suggestion(1);" id="suggestion" class="form-control" placeholder="" value="" min="0" type="text">
</td>
<td>
<input name="note[]" onkeyup="note(1);" id="note" class="form-control" placeholder="" value="" min="0" type="text">
</td>
<td>
<button style="text-align: right;" class="btn btn-danger" type="button" value="<?php echo display('delete') ?>" onclick="deleteRow(this)"><?php echo display('delete') ?></button>
</td>
</tr>
</tbody>
</table>
</div>

 

Jquery code

<script type="text/javascript">
var count = 2;
limits = 500;
// ========== its for row add dynamically =============
function addInputField(t) {
if (count == limits) {
alert("You have reached the limit of adding" + count + "inputs");
} else {
var a = "follow_up_date" + count, e = document.createElement("tr");
e.innerHTML = "<td><input type='text' class='form-control datepicker1' name='follow_up_date[]' id='" + a + "'></td>\n\
<td><input type='text' class='form-control' name='assesment[]' id='assesment" + count + "'></td>\n\
<td><input type='text' class='form-control' name='suggestion[]' id='suggestion'" + count + "'></td> \n\
<td><input type='text' class='form-control' name='note[]' id='note'" + count + "'></td> \n\
<td><button style='text-align: right;' class='btn btn-danger' type='button' value='Delete' onclick='deleteRow(this)'>Delete</button></td>\n\
",
document.getElementById(t).appendChild(e), document.getElementById(a).focus(), count++
}
}
// ============= its for row delete dynamically =========
function deleteRow(t) {
var a = $("#normalinvoice > tbody > tr").length;
if(1 == a){
alert("There only one row you can't delete it.");
}else{
var e = t.parentNode.parentNode;
e.parentNode.removeChild(e);
}
}
</script>