Удалить элемент из списка в 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>

Теперь проблема в том, что, хотя строки добавляются правильно, я не могу их удалить. Даже событие click не вызывает функцию Remove.

javascript jquery html

Всего 3 ответа

1. Вы должны прослушать событие, когда элемент DOM рендерится, переместив событие remove onclick внутрь $("#addNew").click как $("#addNew").click ниже.

       //$.validator.unobtrusive.parse(form);

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

Прочитайте следующий пост, чтобы лучше понять.

Привязка событий к динамически создаваемым элементам?

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>

Попробуй это,

$("td").on("click", "a.remove", function(){
        debugger;
        e.preventDefault();
        $(this).parent().parent().remove();
});

Основываясь на привязке события к динамически создаваемым элементам?

Вы также можете прослушать событие, как

$(staticAncestors).on(eventName, dynamicChild, function() {});

Тогда ваш JQuery выглядит так

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

$(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
        $('#lotTable').on("click", '.remove', function (e) {
           $(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>
                            <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>