Remove row from one table and add it to another with jQuery

Question

I am trying to remove a row from one table and add it to another with jQuery. I've examined this similar Stack Overflow post and feel like I am doing roughly the same thing but am obviously missing something as what I am doing is not working. I know I've got the right row as the remove is working but the row is not being added to the new table.

jQuery

var row = $($.fn.colorbox.element()).parents('tr');
row.fadeOut(1000, function() {
    $('#NewTableBody').append(row.remove());
});

Table Body

<tbody id="NewTableBody">

Answer 1

try

var row = $($.fn.colorbox.element()).parents('tr');

row.fadeOut(1000, function() {
    $('#NewTableBody').append(row);
});

Answer 2

Get rid of the remove() call, That is removing it from the DOM completely. append() will do the move for you.

var row = $($.fn.colorbox.element()).parents('tr');
row.fadeOut(1000, function() {
    $('#NewTableBody').append(row);
});

Answer 3

If you're only looking to remove and append a single row you can try the closest() traversal function:

var $row = $($.fn.colorbox.element()).closest('tr');
$row.fadeOut(1000, function() {
    $('#NewTableBody').append($row);
    $row.fadeIn(1000);
});

Also your row is hidden (because of the fade out). You need to show it again.