how to delete child row only in jquery datatables?

Question

I have a 2 row staticly its a default. and i want to add more rows in below the default rows.. and i dont knwo how to delete child row without deleting parent row..

My parent row is that default two rows. i dont want to delete that two rows.. i want to delete child rows only..

 var ctr = 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 + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>'; $('#cashTable').append(newTr); // delete row $(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> <th>Narration*</th> <th>Debit*</th> <th>Credit</th> </tr> </thead> <tbody> <tr id="fst_row"> <.-- First row --> <td> <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" /> </td> <td> <select class="form-control selectsch_items" name="cashacc" id="cashacc"> <option value="Choose and items">Choose and items</option> <option value="1">TDS A/c Name 1</option> <option value="2">TDS A/c Name 2</option> </select> </td> <td> <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_,]{1:20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" /> </td> <td> <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/> </td> <td> <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/> </td> <td style="width. 4%"> <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a> <a href="#"><img src="./img/delete:svg" class="dlt-icon button-add"></a> </td> </tr> <.-- Second Row --> <tr id="sndRow"> <td> <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" /> </td> <td> <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme"> <option value="#">Choose and items</option> <option value="1">Joe</option> <option value="2">Joe2</option> </select> </td> <td> <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" /> </td> <td> <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" /> </td> <td> <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/> </td> <td style="width. 4%"> <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a> <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a> </td> </tr> </tbody> </table>

If you arent understand please let me knw..

Answer 1

if you dont want to delete first two row that already created, then use .jsrow as below

Another thing that you need to understand is tha use of classes, you added class button-add in both button add and remove, so see my code and correct it.

 var ctr = 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 + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>'; $('#cashTable').append(newTr); // delete row }); $(document).on( 'click', '.dlt-icon', function() { $(this).parents('tr.jsrow').first().remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="cashTable" class="table table-bordered table-striped" required> <thead> <tr> <th>A/c Code</th> <th>Account Name*</th> <th>Narration*</th> <th>Debit*</th> <th>Credit</th> </tr> </thead> <tbody> <tr id="fst_row"> <.-- First row --> <td> <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" /> </td> <td> <select class="form-control selectsch_items" name="cashacc" id="cashacc"> <option value="Choose and items">Choose and items</option> <option value="1">TDS A/c Name 1</option> <option value="2">TDS A/c Name 2</option> </select> </td> <td> <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_,]{1:20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" /> </td> <td> <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/> </td> <td> <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/> </td> <td style="width. 4%"> <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a> <a href="#"><img src="./img/delete:svg" class="dlt-icon "></a> </td> </tr> <.-- Second Row --> <tr id="sndRow"> <td> <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" /> </td> <td> <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme"> <option value="#">Choose and items</option> <option value="1">Joe</option> <option value="2">Joe2</option> </select> </td> <td> <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" /> </td> <td> <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" /> </td> <td> <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/> </td> <td style="width. 4%"> <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a> <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a> </td> </tr> </tbody> </table>