how to delete a table cell in jquery

How to remove a cell when clicked on display_removebutton and rearrange the entire structure Here is the code which im trying to implement. I have tried with $("td:empty").remove(); but no use, it is not working Can any one suggest any modification

 var int_loop =  1;
    var flag_tr = 1;
    $('#total').append("<table width=100%>"); 
    
    $(upfiles).each(function(index, file) 
    {
        display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' data-id='"+int_loop+"' id='remove_"+int_loop+"' src='images/DeleteRed.png' />";
        if(flag_tr === 1 && int_loop ===1)
            $('#total').append("<tr>"); 
       else if(flag_tr === 6)
             $('#total').append("<tr>");
        $('#total').append("<td class='div_files' id='div_selec"+int_loop+"'><b>File Name :</b>"+file.name + display_removebutton+"</td>" ); 
        if(flag_tr === 6)
        {
              $('#total').append("</tr>");
              flag_tr = 1;
        } 
        $("#remove_"+int_loop).click(function() {
            //REMOVED FILES USING SPLICE SUCCESSFULLY
            
            //How do i remove cell here and rearrange the entire structure
            
            $("td:empty").remove(); //tried with this but no use, it is deleting the entire data in a div
        });
        int_loop++;
        flag_tr++;
    }

Edited 1 :

Here is the jsfiddle

Edited 2 : Also im doing append correctly for table tags open and close. because tr an tds are not displaying in table tag

Solution

Here is a working version of your jsFiddle with sample data and all fixes:

You need to remove the closest TD to the button click.
You needed to append the TDs to the TRs and
You needed to append the TRs to the TABLE:
You also wanted a nice transition (fade added)
You do not want to append closing </TR> elements (not needed)
You should use delegated events for dynamically added elements

http://jsfiddle.net/TrueBlueAussie/dXwR8/9/

// Some sample data
var upfiles = [{
    name: "name1"
}, {
    name: "name2"
}, {
    name: "name3"
}, {
    name: "name4"
}, {
    name: "name5"
}, {
    name: "name6"
}, {
    name: "name7"
}

];

var int_loop = 1;
var flag_tr = 1;
$('#total').append("<table width=100%>");

$(upfiles).each(function (index, file) {
    display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' data-id='" + int_loop + "' id='remove_" + int_loop + "' src='images/DeleteRed.png' />";
    if (flag_tr === 1 && int_loop === 1) {
        $('#total table').append("<tr>");
    } else if (flag_tr === 6) {
        $('#total table').append("<tr>");
    }
    $('#total tr:last').append("<td class='div_files' id='div_selec" + int_loop + "'><b>File Name :</b>" + file.name + display_removebutton + "</td>");
    if (flag_tr === 6) {
        $('#total').append("</tr>");
        flag_tr = 1;
    }
    int_loop++;
    flag_tr++;
});
$('#total').on('click', '[id^=remove_]', function () {
    var $td = $(this).closest('td');
    $td.fadeOut(function () {
        $td.remove();
    });
});

Old versions below

Update:

The DOM structure was invalid. You can't add TDs directly to a table. That had to be in a TR. I changed the code to always add to the last TR in the table.

Another update - transitions:

JSFiddle: Of course: jsfiddle.net/TrueBlueAussie/dXwR8/7

If you want a fade before the remove, remember the element in a local variable, and use the callback of fadeOut() to remove the item.

    var $td = $(this).closest('td');
    $td.fadeOut(function(){ $td.remove(); });

Yet another update: Delegated events

JSFiddle: http://jsfiddle.net/TrueBlueAussie/dXwR8/8/

balachandran was quite right in suggesting you use a delegated event handler for dynamic items. It simplifies the code.

$('#total').on('click', '[id^=remove_]', function () {
    var $td = $(this).closest('td');
    $td.fadeOut(function () {
        $td.remove();
    });
});

Delegate event handlers work by listening at an ancestor of the desired elements, then when the chosen event bubbles up to that element, then it applies the jQuery selector to find desired elements, then it applies the function to any matching elements that caused the event.

If you do not have a convenient, non-changing ancestor, use $(document).on, but never $('body').on as body has some weird side-effects.

Delegated events have several benefits:

Simplifies and separates the event code.
You do not have the overhead of adding individual handlers to items.

Final update: http://jsfiddle.net/TrueBlueAussie/dXwR8/9/

The TRs were not being appended to the added TABLE (they were appending to a DIV instead)

I changed the selectors to:

$('#total table').append("<tr>");