Использование .remove на строке таблицы создает стиль отображения: none

Question

Я пытаюсь удалить строку из таблицы. Каждая строка содержит текстовый ввод, кнопку редактирования и кнопку удаления. Когда я нажимаю delete, я хочу удалить всю строку. Это мой JQuery код:

$(document).on('click', 'button#delete_x', function() { 
    $(this).closest('tr').fadeOut(500, function(){ 
     $(this).parents('tr:first').remove(); 
    }); 
}); 

У меня нет доступа к строкам идентификаторов так я получаю ближайший тр к кнопке удаления. Моя проблема заключается в том, чтобы удалить строку, новый встроенный стиль отображения: в tr tr нет ни одного! Мне интересно, почему это происходит? Я использую браузер Safari на mac yosemite.

Answer 1

Вы пытаетесь удалить строку, которая является родительской для анимированной строки, а не самой строки.

Это связано с тем, что фактическое «это» значение зависит от сайта вызова или если, как и в большинстве методов jquery, что-то явно принудительно.

В jquery «это» обычно является элементом, на котором вы действуете. Поэтому, когда вы передаете обратный вызов методу fadeOut(), внутри этого обратного вызова «это» укажет на элемент, который исчезнет (в этом случае строку, которую вы хотите удалить).

Попробуйте вместо этого:

$(document).on('click', 'button#delete_x', function() { 
    $(this).closest('tr').fadeOut(500, function(){ 
     $(this).remove(); 
    }); 
}); 

... или еще яснее:

$(document).on('click', 'button#delete_x', function() { 
    var me = $(this).closest('tr'); 
    me.fadeOut(500, function(){ 
     me.remove(); 
    }); 
}); 

Answer 2

fadeOut() не совпадает с удалением строки. Вы хотите .remove()

Answer 3

Это потому, что вы используете .fadeOut(). Вы хотите просто удалить элемент с помощью JQuery .remove():

$(document).on('click', 'button#delete_x', function() { 
    $(this).parents('tr:first').remove(); 
}); 

P.S. Я хочу увидеть также копию yout html.