jQuery :FadeOut not working with table Rows

Answer 1

Whilst Jab's solution is a the way round the problem it does contain a bug. Specifically your callback function to remove the parent element is going to fire once for every 'td' element in that row, when really it should only fire once for the last one. This can be demonstrated by putting an alert call into the callback, which will be seen once for every td in the row.

I have yet to find a really neat way around this but I ended up with something along the lines of this:

function ShowHideTableRow(rowSelector, show, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        if (show)
        {
            $(this).fadeIn("slow", lastCallback)
        }
        else
        {
            $(this).fadeOut("slow", lastCallback)
        }
    });
}

To call this you would use something like this:

ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });

NOTE: My version does not remove the row from the dom because I just want to hide/show it but it should be fairly easy to adapt.

Answer 2

As of jquery 1.6 you can use promises to execute a single callback after all td animations are finished.

$('td', row).each(function() {
    $(this).fadeOut('slow', 'linear');
})
.promise()
.done(function() {
    $(this).parent('tr').remove();
});

Answer 3

Jquery can now be used like this:

$("#id_of_your_tr").fadeOut(1000);

Answer 4

There is a problem in jQuery when hiding trs. This is the current workaround until they do something similar in the core, if they decide to.

row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});

This basically hides the tds in the row, instead of the actual row. Then it removes the row from the DOM. It works in all browsers I believe. You could target IE specifically though if needed.

Answer 5

These two things are different:

• Hiding the row, either by hide(), fadeOut(), slideUp(), applying a class, setting a CSS value or by way of an animation; and
• removing the element from the DOM.

If I read what you say correctly, you want to do both. If so, try this:

function deleteItem(modelId,itemindexId, rowId) {
  $.get("RemoveFromCart.aspx", {
    model: modelId,
    cartItem: itemindexId,
    mode: "removefromcart",
    rand:Math.random()
  }, function(data) { 
    var row=$("#"+rowId);     
    row.fadeOut(1000, function() {
      row.remove();
    });
  });
};

Basically this is saying:

• GET RemoveCart.aspx on the server with the given parameters;
• When that function returns, start fading the row out over a period of one second;
• When that fadeOut is complete, delete it from the DOM.