Issue while removing a dynamically added row from a html table using jquery

Question

I was creating a dynamic table where a new row is added on a button click. This table contains a column called Delete. Whenever, delete a-link is clicked, the corresponding row is to be deleted. But my jquery is not working.

The snippet that deletes entry from table is:

$(".delRow").click(function()
                        {
                            alert("Called");
                             $(this).parents('tr').first().remove();


                        }
                    );

Here is the jsfiddle LINK

Update: Please Note I am successfully able to delete those row which are not added dynamically. Even the alert is not invoked when I click on Delete a-link column of the row added dynamically.

possible duplicate of Event binding on dynamically created elements?. This question is asked 4/5 times every single day. — dsgriffin
– dsgriffin, Commented Jul 16, 2013 at 9:18

Kevin Bowersox · Accepted Answer · 2013-07-16 09:24:06Z

4

Since the .delRow is not present at the time the page loads you need to use .on to bind the event handler to dynamically created elements.

To use this form of on we first use jQuery to select an existing static parent of the element we would like to bind our event handler. The chosen parent should be as close to the target element as possible to improve performance. We next specify the events that should be handled and the selector for our target element. Finally, the event handler is provided.

            /*Remove Text Button*/
            $("#sample-table").on("click", ".delRow", function()
                {
                    $(this).parents("tr").remove();
                }
            );

Working Example http://jsfiddle.net/qRUev/2/

Documentation

edited Jul 16, 2013 at 9:24

answered Jul 16, 2013 at 9:18

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RONE Over a year ago

hey this is correct, but why not $(this).closest('tr').remove(); instead of $(this).parents("tr").remove();, as closest will improve the performance

José Over a year ago

@ravi-mone can you provide some documentation that it will improve performance? I'm interested in it but I must say I don't know what to look for exactly.

웃웃웃웃웃 · Accepted Answer · 2013-07-16 11:31:53Z

2

Try to use

$('.delRow').live('click', function (){
   alert("Called");
});

instead of

$(".delRow").click(function(){
   alert("Called");
});

edited Jul 16, 2013 at 11:31

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

answered Jul 16, 2013 at 11:13

Gemini

891 bronze badge

Comments

Arun P Johny · Accepted Answer · 2013-07-16 09:32:05Z

1

you may need to use

$(document).on('click', ".delRow", function()
                    {
                        alert("Called");
                         $(this).parents('tr').first().remove();


                    }
                );

Demo: Fiddle

edited Jul 16, 2013 at 9:32

answered Jul 16, 2013 at 9:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Issue while removing a dynamically added row from a html table using jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related