使用 JS 删除按钮添加行表单不起作用

Question

我创建了一个发票表格。一切正常，但问题是删除按钮不起作用。我在网上尝试了很多解决方案。没有任何效果。我只是用其他一些代码编辑了删除代码。但一切都失败了。

我创建了一个发票表格。一切正常，但问题是删除按钮不起作用。我在网上尝试了很多解决方案。没有任何效果。我只是用其他一些代码编辑了删除代码。但一切都失败了。

我的 JS 脚本

$(document).ready(function() {
  $(".add-row").click(function() {
      var name = $("#name").val();
      var email = $("#email").val();
      var markup = "<tr><td class='text-center w-3x pt-2'><input type='checkbox' /></td><td class='w-10x'><div class='form-group mb-1'><select class='custom-select custom-select-sm font-sm'><option value='1' selected>-- Select Product --</option><option value='1'>Cheese Burger</option><option value='2'>Cheese Pizza</option></select></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='number' step='1' min='1' /></div></td><td class='w-10x'><div class='form-group mb-1'><select class='custom-select custom-select-sm font-sm'><option value selected>select</option><option value>FULL</option><option value>HALF</option></select></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='text' /></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='text' /></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='text' /></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='text' /></div></td><td class='w-10x'><div class='form-group mb-1'><input class='form-control form-control-sm font-sm' type='text' /></div></td></tr>";
      $(".kot-table tbody").append(markup);
  });
  /* Find and remove selected table rows */
  $(".delete-row").click(function() {
      $(".kot-table tbody").find('input[name="record"]').each(function() {
          if ($(this).is(":checked")) {
              $(this).parents("tr").remove();
          }
      });
  }); 
});

下面是我的 HTML。

<form>
                            <div class="form-row">
                                <div class="col">
                                    <div class="form-group">
                                        <div>
                                            <div class="form-row">
                                                <div class="col"><input class="form-control font-sm" type="text" placeholder="PO Type"></div>
                                                <div class="col"><input class="form-control font-sm" type="number" placeholder="PO Number"></div>
                                                <div class="col"><input class="form-control font-sm" type="date"></div>
                                                <div class="col"><input class="form-control font-sm" type="text" placeholder="PO Status"></div>
                                            </div>
                                            <div class="form-row" style="padding-top: 7px;">
                                                <div class="col"><input class="form-control font-sm" type="text" placeholder="Supplier Name"></div>
                                                <div class="col"><input class="form-control font-sm" type="number" placeholder="Contact No."></div>
                                                <div class="col"><input class="form-control font-sm" type="text" placeholder="Currency Code"></div>
                                                <div class="col"><input class="form-control font-sm" type="text" placeholder="Tax Treatment"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-bg" style="background: rgb(255,255,255);">
                                        <div class="form-row">
                                            <div class="col-md-2 col-xl-2 offset-md-3 offset-xl-4 text-left align-self-center"><button class=" btn-info btn-block btn-sm add-row btn-xs" type="button" style="background: #032c71;"><i class="fa fa-plus"></i><strong>&nbsp;Add Item</strong></button></div>
                                            <div class="col-md-1 col-xl-1 align-self-center"><button class="btn-danger btn-block btn-sm delete-row btn-xs" type="button" style="background: #c10000;"><i class="fa fa-trash-alt"></i></button></div>
                                        </div>
                                        <div class="table-responsive tbl-wfx mt-1 kot-table">
                                            <table class="table table-sm">
                                                <thead class="text-dark font-md">
                                                    <tr class="text-dark-blue">
                                                        <th class="text-center w-3x"><strong>#</strong></th>
                                                        <th><strong>Item Code</strong></th>
                                                        <th><strong>Desc</strong></th>
                                                        <th><strong>Unit</strong></th>
                                                        <th><strong>Qty</strong></th>
                                                        <th><strong>Rate</strong></th>
                                                        <th><strong>VAT(%)</strong></th>
                                                        <th><strong>Discount</strong></th>
                                                        <th><strong>Amount</strong></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="h-15x">
                                                    <tr>
                                                        <td class="text-center w-3x pt-2"><input type="checkbox"></td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><select class="custom-select custom-select-sm font-sm">
                                                                    <option value="1" selected="">-- Select Product --</option>
                                                                    <option value="1">Cheese Burger</option>
                                                                    <option value="2">Cheese Pizza</option>
                                                                </select></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="number" step="1" min="1"></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><select class="custom-select custom-select-sm font-sm">
                                                                    <option value="" selected="">select</option>
                                                                    <option value="">FULL</option>
                                                                    <option value="">HALF</option>
                                                                </select></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                        </td>
                                                        <td class="w-10x">
                                                            <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="form-row" style="padding-top: 10px;">
                                    <div class="col">
                                        <h5>Notes:</h5><textarea class="form-control" rows="8"></textarea>
                                    </div>
                                    <div class="col">
                                        <div class="box-bg">
                                            <div class="form-row text-dark">
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Gross amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">VAT (%):</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text"></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">TAX Amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text"></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Discount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text"></div>
                                                </div>
                                                <div class="col-xl-5 offset-xl-0 align-self-center">
                                                    <h6 class="mb-0 font-sm">Net amount:</h6>
                                                </div>
                                                <div class="col-xl-7 offset-xl-0 text-right align-self-center">
                                                    <div class="form-group mb-1"><input class="form-control form-control-sm font-sm" type="text" ></div>
                                                </div>
                                                <div class="col text-right"><button class="genric-btn success circle arrow" type="submit" style="padding-top: 6px;margin-top: 5px;background: #4cd3e3;color: rgb(255,255,255);margin-left: 0;">Submit</button><a class="genric-btn warning circle arrow" role="button" style="padding-top: 6px;margin-top: 5px;margin-left: 10px;color: rgb(255,255,255);background: #032c71;" href="window.print();">Print</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

Answer 1

    /* Find and remove selected table rows */
    $(".delete-row").click(function() {
        $(".kot-table tbody").find('input[type="checkbox"]:checked').each(function(index, elm) {
            $(elm).parents("tr").remove();
        });
    });