Search code examples
jqueryjquery-effects

jQuery slideUp on Table Row and remove


I'm having trouble with the following code. I'm trying to remove a specific row from a table using jQuery, but I'd like to use the slideUp effect so the row slides up and then removes itself. I've tried the following, but it does not seem to respect the effect. It just removes itself.

$('[data-company-id='+companyId+']').closest('tr').slideUp('fast', function() { $(this).remove(); });

My table row contains a button in one of the cells with a data-company-id attribute. This does work in getting the right cell, and corresponding parent and remove it. But it does not slide Up before the remove.

What am I doing wrong?


Solution

  • Animations are not supported on table rows, from here: How to Use slideDown (or show) function on a table row?

    I tested it myself just to make sure. If you do not wish to wrap the td in a div I suggest you play around with a grid frameworks such as bootstrap or foundation and use its columns to create a table effect, these will accept the animations you wish to use (and it looks a little cleaner).

    (Posted as an answer upon OP's request, originally in the comments because SO automatically moved it there :P).