javascript - Using .remove on a table row produces style of display:none -

i trying remove row table. each row contains text input, edit button , delete button. when click delete want entire row removed. jquery code:

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

i don't have access rows id's getting closest tr delete button. problem instead of removing row, new inline style of display:none appears in tr! wondering why happening? using safari browser on mac yosemite.

you trying remove row parent of row animated instead of row itself.

this because actual "this" value depends on call site or if, in of jquery methods, explicitly forced.

in jquery "this" forced element acting on. when pass callback fadeout() method, inside callback, "this" point element faded out (in case row want remove).

try instead:

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

...or clearer:

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