Удалить строку таблицы в JQuery

Question

У меня проблема с удалением строк из таблицы в соответствии с флажком.Ниже скриншот для того, что я делаю.Это таблица с подробностями воздушного рейса.

Максимальная строка, которую можно добавить, составляет 15 строк.Что я хочу сделать, так это дать пользователю доступ к удалению того или иного конкретного рейса или просто удалить все, установив флажок «Все» и нажав «Удалить строку».

Ниже приведен jquery, который используется для обработки этого:

$("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');
            }
         }
    });
});

Этот jquery делает то, что я хочу, очень хорошо.Пользователь может выбрать любую конкретную информацию о рейсе и удалить их, или пользователь может удалить их все.

Однако, когда пользователь решает удалить их все, у меня есть jquery, который удалит начало строки со строки № 2 (где показан рисунок выше, это Рейс 1).Мне нужно найти другой способ, где строка ДОЛЖНА быть удалена из последней строки, а именно: Рейс 15, затем Рейс 14, Рейс 13 и так далее.Я сохраню строку № 2 (используемую в Flight 1), оставив все входные значения пустыми для этой строки.

Я попытался использовать селекторы jquery: gt, это не работает так, как я хочу.Поэтому, если кто-то может помочь мне удалить строку из самой последней строки (для удаления всех) и сохранить функцию, с помощью которой пользователь может удалять конкретный рейс в зависимости от выбора пользователя, я был бы очень признателен.

Большое спасибо за вашу помощь.

Answer 1

Извините, у меня проблемы с работой с вашим кодом, так что я просто собираюсь построить его по-другому. Я постараюсь прокомментировать это соответствующим образом, чтобы это все еще имело смысл.

$("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();
        }

    });
});

Answer 2

Я нашел решение для этого. Решение на самом деле не отвечает на мой вопрос. Решение является своего рода обходным путем для этого.

Причина, по которой я спросил, как удалить строку таблицы из самой последней строки, заключается в том, чтобы идентификатор соответствовал номеру 1 и так далее.

Поскольку уникальным идентификатором поля является только идентификатор, поэтому значение может передаваться в базу данных, я просто использую любое число, если оно уникально. Я написал сценарий jQuery для поиска существующей строки таблицы и замены всего, что не является номером, из одного из входных данных, связанных с этой строкой таблицы.

Затем я проверю, существует ли номер из другой строки таблицы. Если он существует, я просто добавляю это число. Я использую .each (), чтобы сделать это, и остановлюсь, как только он не сможет найти существующий номер. Этот номер затем будет использоваться для однозначной идентификации поля.

Answer 3

попробуйте что-то вроде этого:

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

Возможно, вам понадобится пара parent (). Parent () зависит от того, как выглядит ваш html.