I currently have two static default rows and I would like to add more rows below the existing ones without deleting the parent rows. However, I am unsure of how to delete child rows without affecting the parent rows.
My parent rows consist of the default two rows which I do not want to delete. My aim is to only delete the child rows.
var counter = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ...
$('#cashTable').append(newTr);
$(document).ready(function() {
$('.dlt-icon').click(DeleteRow);
});
function DeleteRow() {
$(this).parents('tr').first().remove();
}
});<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
&...
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
...
</tr>
</tbody>
If you are having trouble understanding this, please let me know.