html5 - How to delete TD's using id in jquery -

i'm having table generating dynamically using jquery each loop,

each td having unique id,

my aim is: when click on delete button out side loop, has delete particular td's , empty data particular td.

html code :

<a class='class_removebutton' id="removeunsupportedfiles" href='javascript:undefined;'>remove unsupported files</a> 

jquery code working fine individual delete, how delete tds ids :

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

//updated code starts

$("#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'); // reference of div //                            $successmessagediv.fadein('slow').html("successfully removed."+ file.name); // show , set message //                             $successmessagediv.fadeout(1000) //                             total_size = total_size - (file.size/1024); //                            if(total_size < limit)  //                            { //                                $("#div_errorlog").fadeout('slow'); //                            } //                        } //                    }); 

//updated code ends

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

here js fiddle : click here

you can use:

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

working demo

update: iterating on unsupported file id arrays , remove them:

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