javascript - 从 jquery 列表中删除项目不起作用

Question

以前曾有人问过这个问题，但我无法通过查看解决方案找出问题所在。

所以我有一个 HTML 和 jquery 代码，可以添加如下行:-

$(document).ready(function () {
        window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")';
        window.SaveItemDetails = '@Url.Action("SaveItemDetails", "Technical")';

        $('#divQuoteDetails').hide();

        //1. Add new row
    $("#addNew").click(function (e) {
        e.preventDefault();
        var $tableBody = $("#lotTable");
        var $trLast = $tableBody.find("tr:last");
        var $trNew = $trLast.clone();

        var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
        $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
        $.each($trNew.find(':input'), function (i, val) {
            // Replaced Name
            var oldN = $(this).attr('name');
            var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
            $(this).attr('name', newN);
            //Replaced value
            var type = $(this).attr('type');
            if (type.toLowerCase() == "text") {
                $(this).attr('value', '');
            }

            // If you have another Type then replace with default value
            $(this).removeClass("input-validation-error");

        });
        $trLast.after($trNew);

        // Re-assign Validation
        //var form = $("form")
        //    .removeData("validator")
        //    .removeData("unobtrusiveValidation");
        //$.validator.unobtrusive.parse(form);
    });

 
    // 2. Remove
        $('.remove').on("click", "a", function (e) {
            debugger;
        e.preventDefault();
        $(this).parent().parent().remove();
    });

});

<div class="row">
                <div class="col-md-12"><a href="#" id="addNew" class="btn btn-sm btn-info">Add Lot Details</a></div>
                <table id="lotTable" class="table table-responsive table-hover">
                    <thead>
                        <tr class="bg-cyan">
                            <th>Lot Name</th>
                            <th>Lot Date</th>
                            <th>Lot Qty</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in ViewBag.LotTable)
                        {
                            <tr>
                                <td>
                                    <input name="LotName" id="LotName" type="text" value="@item.LotName" class="form-control" />
                                </td>
                                <td>
                                    <input name="LotDate" id="LotWiseDate" type="text" value="@item.LotWiseDate" class="form-control NoEndDate forSingle" readonly="readonly" autocomplete="off" />
                                </td>
                                <td>
                                    <input name="LotQty" id="LotWiseQty" type="text" value="@item.LotWiseQty" class="form-control" />
                                </td>
                                <td></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>

现在的问题是，虽然行已正确添加，但我无法删除它们。即使点击事件也没有调用Remove函数。

Answer 1

1. 当 DOM 元素被渲染时，您应该通过将事件 remove onclick 移动到 $("#addNew") 内部来监听该事件.click 如下所示。

       //$.validator.unobtrusive.parse(form);
        
         // 2. Remove
        $('.remove').on("click", function (e) {
           console.log("Removed");
           $(this).parent().parent().remove();
        });

阅读以下文章以更好地理解。

Event binding on dynamically created elements?

2. 您已经监听了 .remove 一个元素，因此无需监听 on("click", "a", 再次。

$(document).ready(function () {
        window.VendorDetail = '@Url.Action("GetQuoteVendorDetail", "Technical")';
        window.SaveItemDetails = '@Url.Action("SaveItemDetails", "Technical")';

        $('#divQuoteDetails').hide();

        //1. Add new row
    $("#addNew").click(function (e) {
        e.preventDefault();
        var $tableBody = $("#lotTable");
        var $trLast = $tableBody.find("tr:last");
        var $trNew = $trLast.clone();

        var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
        $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
        $.each($trNew.find(':input'), function (i, val) {
            // Replaced Name
            var oldN = $(this).attr('name');
            var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
            $(this).attr('name', newN);
            //Replaced value
            var type = $(this).attr('type');
            if (type.toLowerCase() == "text") {
                $(this).attr('value', '');
            }

            // If you have another Type then replace with default value
            $(this).removeClass("input-validation-error");

        });
        $trLast.after($trNew);

        // Re-assign Validation
        //var form = $("form")
        //    .removeData("validator")
        //    .removeData("unobtrusiveValidation");
        //$.validator.unobtrusive.parse(form);
        
         // 2. Remove
        $('.remove').on("click", function (e) {
           console.log("Removed");
           $(this).parent().parent().remove();
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
                <div class="col-md-12"><a href="#" id="addNew" class="btn btn-sm btn-info">Add Lot Details</a></div>
                <table id="lotTable" class="table table-responsive table-hover">
                    <thead>
                        <tr class="bg-cyan">
                            <th>Lot Name</th>
                            <th>Lot Date</th>
                            <th>Lot Qty</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in ViewBag.LotTable)
                        {
                            <tr>
                                <td>
                                    <input name="LotName" id="LotName" type="text" value="@item.LotName" class="form-control" />
                                </td>
                                <td>
                                    <input name="LotDate" id="LotWiseDate" type="text" value="@item.LotWiseDate" class="form-control NoEndDate forSingle" readonly="readonly" autocomplete="off" />
                                </td>
                                <td>
                                    <input name="LotQty" id="LotWiseQty" type="text" value="@item.LotWiseQty" class="form-control" />
                                </td>
                                <td></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>