從 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();
        });

閱讀以下帖子以獲得更好的理解。

動態創建的元素上的事件綁定？

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>

Answer 2

試試這個方法。

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

Answer 3

基於動態創建的元素上的后事件綁定？

您還可以收聽事件，例如

$(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>