Remove Table Row in JQuery

I have problem removing rows from a table according to the checkbox. Below is the screen shot for what I do. It's a table for air flight details.

The maximum row can be added is 15 rows. What I want to do is to give the user access to delete which particular flight or just delete all, by selecting all checkbox and press Delete Row.

The following is the jquery that use to handle this:

$("input[id$='_del_flight']").click(function() {

    var n = $("#" + this.id.slice(0,1) + "_airline_table tr").length;

    $("#" + this.id.slice(0,1) + "_airline_table tr").each(function(){

        if ( $("input[type=checkbox]",this).is(':checked') ) {
            if ( n > 2 ) {
                $(this).remove();
                n--;
                //alert("Value n-- is: " + n);
            } else {
                $(this).find("input").val('');
                $(this).find("input[type=checkbox]").removeAttr("checked");
                $(this).find('option:first').attr('selected', 'selected').parent('select');
            }
         }
    });
});

This jquery does what I want very well. The user can select any particular flight details and delete them, or the user can delete them all.

However, when the user decides to delete them all, the jquery I have will delete the row start from row number开发者_运维百科 2 (where shown is the figure above is Flight 1). I need to come up with another way where the row MUST be deleted from the last row, which is Flight 15, then Flight 14, Flight 13 and so on. I will keep the row number 2 (used by Flight 1) by making all inputs value empty for this row.

I did try use jquery :gt selectors, it does not work like what I want. So if someone out there can help me to delete the row from the very last row (for delete all) and keep the feature where the user can delete particular flight based on the user selection, I would really appreciate it.

Thank you so much for your help.

try something like this:

$(":checked").each(function() {
    $(this).parent().remove()
});

You might need a couple parent().parent() depends on how your html looks like.

Sorry I'm having trouble working around with your code, so I'm just going to build it differently. I'll try to comment it appropriately so that it still makes sense.

$("input[id$='_del_flight']").click(function() {
    // Get the table with the right ID
    var table = $('#' + this.id.slice(0,1) + '_airline_table');

    // Get all CHECKED checkboxes within the table
    table.find('input[type=checkbox]:checked').each(function () {

        // Get the row the checkbox belongs to
        var row = $(this).closest('tr');

        // Is this the first row?
        if (row.index() === 0) {
            // Your resetting code
            row.find("input").val('');
            row.find("input[type=checkbox]").removeAttr("checked");
            row.find('option:first').attr('selected', true);
        } else {
            // Remove the row
            row.remove();
        }

    });
});

I have found the solution for this. The solution is actually not answering my question. The solution is kind of a work around for this.

The reason why I asked how to delete the table row from the very last row is to keep the id consistent from number 1 and so on.

Since, it's only an ID, to uniquely identified the field, so the value can go to the database, I just use any number, as long as it's unique. I wrote the jQuery script to find the existing table row and replace anything that is not number from one of the input that is associated to this table row.

Then, I will check whether the number is exist or not from the other table row. If it exist, I just add one the this number. I use .each() to do this, and will stop once it can't find existing number. This number, then will be used to uniquely identified the field.