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.

The function is not getting called itself. I'm trying to put a debugger but it's not being hit. — Deepak, Feb 13 '20 at 04:42

Nguyễn Văn Phong · Accepted Answer · 2021-01-11T04:05:10.747

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>

I've been checking since yesterday. This is cracking my head. It should not be so hard to do. Still I can't figure out the problem, :( — Deepak, Feb 13 '20 at 04:46
Check again and give me your feedback. It works fine for me. — Nguyễn Văn Phong, Feb 13 '20 at 04:49
Oh Yeah, I missed the first line of your answer. It does work. Thanks!! — Deepak, Feb 13 '20 at 04:51
1. You should listen to event when the DOM element has been rendered. 2. you've already listen `.remove` an element so no need to listen `.a` again. Besides, it's incorrect syntax — Nguyễn Văn Phong, Feb 13 '20 at 04:53
But why we need to keep it inside the $("#addNew").click event? — Deepak, Feb 13 '20 at 04:56
**You should listen to event when the DOM element has been rendered** — Nguyễn Văn Phong, Feb 13 '20 at 05:01

score 0 · Answer 2 · edited Feb 21 '20 at 09:28

0

Try this way.

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

edited Feb 21 '20 at 09:28

Nguyễn Văn Phong

13,506
17
39
56

answered Feb 13 '20 at 04:47

Deepak Preman

113
1
11

score 0 · Answer 3 · answered Feb 13 '20 at 09:25

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>

This can also be done. But I'll go with the previous solution. — Deepak, Feb 13 '20 at 15:43

Remove item from list in jquery not working

3 Answers3