Question

I want to detach a row from a table after a button is clicked. However, I cannot manage to append it back to where it was. I ended up with the code below to detach the row that the “delete” button belongs to:

$(".removeTR").live('click', function (event) {
$(this).closest('tr').fadeTo(400, 0, function () {
    $(this).detach();
});
return false;
});

The problem gets more complicated when I need to detach more than one row and then append them all with a “reset” button. Can you please make any suggestions or direct me to the proper logic?

Answer 1

I managed to make it work exactly the way I wanted utilizing show() and hide(). This way I didn’t have to worry about positioning. However I have concerns over the performance when dealing with a huge number of table rows.

var trItems = $("table tr").length;
$(".resetALL").hide();

$(".removeTR").live('click', function (event) {
    $(".resetALL").fadeIn("slow");
    $(this).closest('tr').fadeOut("normal");
    var trHidden = $("table tr:hidden").length+1;
    var trRemains = trItems - trHidden;
    if (trRemains <= 3) {
        $("span").text("You must have at least " + (trRemains-1) + " products in the comparison table.");
        $(".removeTR").fadeOut("normal");
    }
});

$(".resetALL").live('click', function (event) {
    $("table tr:hidden").fadeIn("slow");
    var trItems = $("table tr").length;
    $(".removeTR").fadeIn("slow");
    $("span").text("This is the span.");
    $(".resetALL").fadeOut("normal");
});

You can see my working example below: http://jsfiddle.net/YCdGQ/51/