jquery如何删除表格单元格

Question

点击display_removebutton时如何删除单元格并重新排列整个结构 这是我试图实现的代码。我试过$("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++;
    }

已编辑 1：

这里是jsfiddle

编辑 2： 我也在为打开和关闭的表格标签正确附加。因为 tr 和 tds 没有显示在表格标签中

Answer 1

这是您的 jsFiddle 的工作版本，其中包含示例数据和所有修复：

• 您需要删除closest TD 才能单击按钮。
• 您需要将TDs 附加到TRs 和
• 您需要将TRs 附加到TABLE：
• 您还想要一个漂亮的过渡（添加了淡入淡出）
• 您不想附加结束 </TR> 元素（不需要）
• 您应该为动态添加的元素使用委托事件

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();
    });
});

---

以下旧版本

---

更新：

DOM 结构无效。您不能将 TD 直接添加到表中。那必须在TR中。我将代码更改为始终添加到表中的最后一个 TR。

另一个更新 - 过渡：

JSFiddle：当然：jsfiddle.net/TrueBlueAussie/dXwR8/7

如果你想在remove之前有一个fade，记住元素在一个局部变量中，然后使用fadeOut()的回调来移除item。

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

另一个更新：委托事件

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

balachandran 建议您对动态项目使用委托事件处理程序是非常正确的。它简化了代码。

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

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

如果您没有方便、不变的祖先，请使用 $(document).on，但不要使用 $('body').on，因为 body 有一些奇怪的副作用。

委托活动有几个好处：

1. 简化和分离事件代码。
2. 您无需为项目添加单个处理程序的开销。

最终更新：http://jsfiddle.net/TrueBlueAussie/dXwR8/9/

TRs 没有被附加到添加的 TABLE（而是附加到 DIV）

我将选择器更改为：

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

Answer 2

尝试删除每个函数内的事件绑定，并在此上下文中使用event-delegation，

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