如何在jquery中使用id删除TD

时间:2014-06-27 13:01:43

标签: jquery html5 file-upload drag-and-drop

我正在使用jquery每个循环动态生成表,

每个TD都有唯一的ID,

我的目标是:当我点击循环外的删除按钮时,必须删除某些特定的TD并且还清空该特定TD的数据。

HTML CODE:

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

JQUERY CODE使用INDIVIDUAL DELETE进行精细处理,如何删除某些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

1 个答案:

答案 0 :(得分:0)

您可以使用:

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

<强> Working Demo

更新:,用于迭代不受支持的文件ID数组并将其删除:

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