Remove row from table with fadeOut effect

Question

I have a table that has some rows,each row has a background. There is a button that remove specified row with jQuery fadeOut, but during the operation the design doesn't good.cells background will be white.

$(document).ready(function(){
    $(".btn").click(function(){
        $("#row").fadeOut();
    });
});

This jsfiddle describes my problem better.

You already got the fadeout effect? What do you exactly need? — Yasitha, Sep 02 '13 at 10:09
Please not that calls background will be white color and my background for rows broken — Saman Gholami, Sep 02 '13 at 10:10
with this fadeOut effect you can't avoid because it sets opacity in backhand, use $("#row").remove() or $("#row").hide() to avoid this issue — maverickosama92, Sep 02 '13 at 10:17
You can always set the fadeOut effect with a small duration. Like fadeOut("fast") or fadeOut("100") — MarsOne, Sep 02 '13 at 10:23

score 16 · Answer 1 · answered Sep 02 '13 at 10:22

try this:

$(document).ready(function(){
    $(".btn").click(function(){
        $("#row").fadeTo("slow",0.7, function(){
            $(this).remove();
        })
    });
});

working fiddle here: http://jsfiddle.net/wnKXP/4/

you can set opacity in "0.7"

I hope it helps.

DGS · Accepted Answer · 2013-09-02T13:40:06.597

The below code will achieve a shrinking row and then hide it without turning the background white

$(document).ready(function(){
    $(".btn").click(function(){
        $("#row td").animate({'line-height':0},1000).hide(1);
    });
});

Fiddle example

Animating line height doesnt go all that smoothly with webkit however.

You can also animate the hide() function by setting its parameter to the time taken to hide

$(document).ready(function(){
    $(".btn").click(function(){
        $("#row").hide(1000);
    });
});

That however also suffers from the "white background problem" since it animates the opacity.

Adapting from http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ gives a nice shrinking without white space in at least Chrome and Firefox

Fiddle

$(document).ready(function () {
    $(".btn").click(function () {
        $('#row')
            .children('td, th')
            .animate({
            padding: 0
        })
            .wrapInner('<div />')
            .children()
            .slideUp(function () {
            $(this).closest('tr').remove();
        });
    });
});

This solution is very tricky but worked good.Thank you for your effort — Saman Gholami, Sep 02 '13 at 16:19

score 3 · Answer 3 · answered Apr 20 '19 at 17:53

3

You are just hiding the row and not removing it completely. To remove the row completely from the table and also using fadeout effect use this code.

 $("#row").fadeOut("slow", function() {
             $("#row").remove();
          });

answered Apr 20 '19 at 17:53

Muhammad Haroon

274
1
6
20

score 1 · Answer 4 · answered Sep 09 '15 at 13:25

1

Just add the same background to your table which you applied for table row then you will not see any background for rows.

$(document).ready(function(){
   $(".remove").click(function(){
    $(this).parents("tr").fadeOut();
  });
});

here is the link for jsFiddle

answered Sep 09 '15 at 13:25

Srinivas Rampelli

785
7
17

Thats nice, but what about different row colours? I think background on tr fade out td and slide up tr before finally remove tr, or would that be too much? – CodingInTheUK Nov 06 '17 at 03:39

score 0 · Answer 5 · answered Sep 02 '13 at 10:10

0

you can use .hide() in the place of .fadeOut() to avoid this issue.

$(document).ready(function(){
    $(".btn").click(function(){
        $("#row").hide();
    });
});

here is the updated jsFiddle File

answered Sep 02 '13 at 10:10

Roy Sonasish

4,571
20
31

Remove row from table with fadeOut effect

5 Answers5

Linked