如何在jquery中删除表单元格

如何在单击“显示”按钮时删除单元格并重新排列整个结构 下面是我试图实现的代码。我已尝试使用

$（“td:empty”）.remove（）但没有用，它不工作
有人能提出修改意见吗

 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++;
    }

var int_loop=1；
var flag_tr=1；
$（“#总计”）。追加（“”）；
$（upfiles）。每个（函数（索引，文件）
{
显示_removebutton=“”；
if（flag_tr==1&&int_loop==1）
$（“#总计”）。追加（“”）；
else if（标志_tr==6）
$（“#总计”）。追加（“”）；
$（'#total'）.append（“文件名：“+File.Name+display_removebutton+”）；
如果（标志_tr==6）
{
$（“#总计”）。追加（“”）；
flag_tr=1；
} 
$（“#删除"+int_循环）。单击（函数（）{
//使用SPLICE成功删除了文件
//我如何在这里移除单元格并重新排列整个结构
$（$td:empty”）.remove（）；//尝试了此操作，但没有任何用处，它正在删除div中的整个数据
});
int_loop++；
flag_tr++；
}

编辑1:

这是你的电话号码

Edited 2:我也在为表标记open和close正确追加。因为tds没有显示在表标记中
请尝试删除每个函数内的事件绑定，并在此上下文中使用
事件委派

$('#total').on('click','[id^="remove_"]',function(){
  $(this).closest('tr').find('td:empty').remove();
});

以下是JSFIDLE的工作版本，其中包含示例数据和所有修复：


您需要删除与单击按钮最近的
TD

您需要将
TD
s附加到
TR
s，然后
您需要将
TR
s追加到
表中：

您还需要一个漂亮的过渡（添加淡入淡出）
您不想附加结束
元素（不需要）
您应该为动态添加的元素使用委派事件

还有一个更新：委派事件
JSFiddle：
balachandran
非常正确地建议您对动态项使用委托事件处理程序。它简化了代码

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

委托事件处理程序通过侦听所需元素的祖先来工作，然后当所选事件冒泡到该元素时，它应用jQuery选择器来查找所需元素，然后将函数应用到导致事件的任何匹配元素

如果您没有一个方便的、不变的祖先，请使用
$（document）.on
，但决不要使用
$（“body”）。on
，因为body有一些奇怪的副作用

委派事件有几个好处：

简化和分离事件代码
您没有向项目添加单个处理程序的开销
最后更新：
TR
s没有被追加到添加的
表中（而是追加到DIV中）

我将选择器更改为：

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

$（“#总计表”）。追加（“”）；
这类问题确实需要一个HTML示例，最好是JSFIDLE:）为什么-1您能解释仍然需要什么信息吗。。我将提供。。。我不能在这里发布整个代码，这不是一件好事。。。我也清楚地说明了我的问题。。。还需要任何信息。我将提供OK，因为它是拖放输入文件上载。。我还没有提供我能提供的全部内容？在谷歌浏览器中运行它。右键单击任意图元并选择“检查图元”。这将在正确的位置打开DOM资源管理器。享受：）更干净，但他们在添加事件处理程序后，按项添加。#total不是divcell@prassu它是静态父级，我们可以使用它来委派事件。。。！按你建议的那样试着不工作。。我已替换$（“td:empty”）.remove（）；我说过，这更干净（更可取），但这不是他们提出的问题。您还需要更好地解释它，因为
prassu
显然不理解它（根据他们的
这是一个div
注释）。他们可能没有使用您的代码：）好的，整理了TRs和TDs的其他问题。它现在应该在每5个文件后正确换行。不知道“最近的”，它还有一个
$（“#total”）。append（“”）这完全不起作用。您只能附加打开元素或匹配打开/关闭集，而不能单独关闭元素
。是否可以为删除td设置效果。。就像我们逐渐消失。。。如果使用jQuery
$（“”）
创建元素，那么它会自动创建元素节点（具有隐式打开和关闭）。您不仅仅是在添加HTML文本。检查F12 Chrome调试工具中的DOM！附言：你不需要一直移除accept来引起我的注意（这很烦人）。问吧！：）
$('#total').on('click', '[id^=remove_]', function () {
    var $td = $(this).closest('td');
    $td.fadeOut(function () {
        $td.remove();
    });
});

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