Question

I have a page that contains a table with the following format:

    <table id="gigsTable">
        <tr><th>Date</th><th>Time</th><th>Location</th><th>Remove</th></tr>
        <tr class="gigRow">
            <td><input name="date" type="text" value="Date goes here"></td>
            <td><input name="time" type="text" value="Time goes here"></td>
            <td><input name="location" type="text" value="Location goes here"></td>
            <td class="remove"><input name="remove" type="checkbox" /></td>
        </tr>

When the checkbox in the remove column is clicked its parent row fades out and then is removed using the following jQuery:

    $("#gigsTable tr .remove input").click(function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

I also have a button that adds a row to the table when clicked:

    $('#addGig').click(function() {
        $('#gigsTable tr:last').after('<ROW FORMAT FROM HTML>');
        rowCount++;
    });

This all works fine however when I try to remove a row that is inserted using the above method nothing happens. Why?

Answer 1

The reason is that you set yur remove function when page loads and that doesn’t contains new elements. So try to do with live function of Jquery which will bind click event to your new elements too.

 $("#gigsTable tr .remove input").live("click",function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });