Remove item from list in jquery not working

Question

This has been asked sometime before but I'm not able to figure out the problem looking at there solution.

So I've got a HTML and jquery code which add rows like this:-

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

Now the problem is although the rows are adding properly I'm not able to remove them. Even the click event is not calling the Remove function.

Answer 1

1. You should listen to the event when the DOM element has been rendered by moving the event remove onclick into inside $("#addNew").click like below.

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

Read the following post to have a better understanding.

Event binding on dynamically created elements?

2. You've already listened .remove an element so you no need to listen on("click", "a", again.

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

Try this way.

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

Answer 3

Based on the post Event binding on dynamically created elements?

You can also listen to event like

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

Then your jquery looks like this

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