Add Remove table row using jquery

Question

I cannot delete the dynamically generated row in a table. I have searched the internet but couldn't found any suitable solution to my problem. I'm sharing what I have done so far:

$("#AddMore").click(function () {
    $("#maintable").each(function () {
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
});
$("#maintable").on('click', "#deleteRow", function () {
    $("#deleteRow").closest('tr').remove();
});

This script is just adding rows but I can't delete the row. I have used jQuery remove function but didn't get any result. Please guide me

You should look the jQuery doc for delegated events. In short, if you want to set event handler on dynamically created elements, you should actually link the event to the parent of those elements. It would be easier to help you seeing the HTML and whole javascript, which you can erasilly show us through a jsfiddle. — Laurent S., Jun 02 '14 at 09:15
http://stackoverflow.com/questions/18226598/how-to-add-a-button-dynamically-using-jquery — Ehsan Sajjad, Jun 02 '14 at 09:59

score 1 · Answer 1 · answered Jun 02 '14 at 09:16

1

First of all use class instead of id becuase id must be unique and then do like this:

$("#maintable").on('click', ".deleteRow", function () {
    $(this).closest('tr').remove();
});

answered Jun 02 '14 at 09:16

Ehsan Sajjad

61,834
16
105
160

i have used this and it solved the issue "$("#delete").click(function () { $('tr:last').remove(); });" no i want to ask that is there any way to display remove button only when new dynamic row added? not on page load – DevWithSigns Jun 02 '14 at 09:20
the way you are appendin tr you can append a button as well same way – Ehsan Sajjad Jun 02 '14 at 09:35
i have a autocomplete textbox as well i also want to use autocomplete with dynamic textboxes, how can i do that? – DevWithSigns Jun 02 '14 at 09:49
on those textboxes add a class and write delegated event on class – Ehsan Sajjad Jun 02 '14 at 09:52
i cannot append remove button can u show me how can i do that with code? this is the button "var btn = 'Remove';" – DevWithSigns Jun 02 '14 at 09:53

naota · Accepted Answer · 2014-06-02T09:59:06.557

0

You mihgt want to change

$("#deleteRow").closest('tr').remove();

To

$(this).closest('tr').remove();

edited Jun 02 '14 at 09:59

answered Jun 02 '14 at 09:16

naota

4,695
1
18
21

Add Remove table row using jquery

2 Answers2