如何仅在 jquery 数据表中删除子行？

Question

我有一个静态的 2 行，它是默认值。 我想在默认行下方添加更多行..而且我不知道如何在不删除父行的情况下删除子行..

我的父行是默认的两行。 我不想删除那两行..我只想删除子行..

 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>

如果你不明白，请告诉我。。

Answer 1

如果您不想删除已经创建的前两行，请使用.jsrow如下

您需要了解的另一件事是使用类，您在按钮添加和删除中添加了 class button-add ，因此请查看我的代码并更正它。

 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>