如何在jquery中使用id删除TD

Question

我在每个循环中使用 jquery 动态生成表，

每个 TD 都有唯一的 id，

我的目标是：当我点击循环外的删除按钮时，必须删除一些特定的 TD 以及该特定 TD 的空数据。

HTML 代码：

<a class='class_removeButton' id="removeUnsupportedFiles" href='javascript:undefined;'>Remove Unsupported Files</a>

JQUERY 代码在单独删除时工作正常，如何删除某些 id 的 tds：

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

//更新代码开始

$("#removeUnsupportedFiles").click(function() {
//                        alert(upfiles.length)
//                        flag_extFileBulk = file.name.split(".").pop();
//                        flag_extFileBulk = flag_extFileBulk.toLowerCase();
//                        flag_extCheckBulk = arr_exts.indexOf(flag_extFileBulk);
//                        if(flag_extCheckBulk < 0)
//                        {
//                            upfiles.splice(index, 1);
//                            var $td = $(this).closest('td');
//                            $td.fadeOut(1000,function(){ $td.remove(); });
//                            var $successMessageDiv = $('#div_successLog'); // get the reference of the div
//                            $successMessageDiv.fadeIn('slow').html("Successfully Removed."+ file.name); // show and set the message
//                             $successMessageDiv.fadeOut(1000)
//                             total_size = total_size - (file.size/1024);
//                            if(total_size < limit) 
//                            {
//                                $("#div_errorLog").fadeOut('slow');
//                            }
//                        }
//                    });

//更新代码结束

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

这里是 JS FIDDLE：CLICK HERE

Answer 1

你可以使用：

$('body').on('click','.class_removeButton',function(){
   $(this).parent().remove();
});

Working Demo

更新： 用于迭代不支持的文件 id 数组并删除它们：

$.each(deleteRecordIds, function(id, index) {
  $('#'+id).parent().remove()
})