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

之前曾有人问过这个问题，但我无法在寻找解决方案时找出问题所在。

所以我有一个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函数。

最佳答案

1.如下图所示，应将事件remove onclick移动到$("#addNew").click内部，以侦听DOM元素渲染后的事件。

       //$.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>

关于javascript - 从jQuery列表中删除项目不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60200553/