Issue While Removing A Dynamically Added Row From A Html Table Using Jquery

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

Solution 1:

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 Examplehttp://jsfiddle.net/qRUev/2/

Documentation

Solution 2:

Try to use

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

instead of

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

Solution 3:

you may need to use

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


                    }
                ); 

Demo: Fiddle