且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

删除动态添加的复选框和相应的图像

更新时间:2023-12-05 16:01:52

您需要更改插入 fileUpload()函数,包含在内包装内。更改以下行:

You need to alter your insert fileUpload() function so that the image is contained within the inner wrapper. Change the following lines

if (imageType.test(file.type)) { 
    fileTemp = document.createElement("img");      
    $("#iso_preview").append("<div class='ct'><input  value='remove'type='checkbox'/></div>");
    fileTemp.classList.add("preview_image");      
} else{
    fileTemp = document.createElement('div');
    fileTemp.classList.add('div');
}     
fileTemp.file = file;

$('#'+preview).append(fileTemp);

对此...

var container = $("<div class='ct'><input  value='remove'type='checkbox'/></div>");
if (imageType.test(file.type)) { 
    fileTemp = document.createElement("img"); 
    fileTemp.classList.add("preview_image");      
} else{
    fileTemp = document.createElement('div');
    fileTemp.classList.add('div');
}     
fileTemp.file = file;
container.append(fileTemp);
$("#iso_preview").append(container);

然后您需要对此行进行细微修改

Then you need to make a slight modification in this line

$('#iso_preview').has('input:checkbox:checked').remove();

选择 #iso_preview div ,而不是 #iso_preview

$('#iso_preview div').has('input:checkbox:checked').remove();

这将删除任何 div 元素,其中包含选中的复选框包含在 #iso_preview

This will remove any div elements containing a checked checkbox that is contained within #iso_preview

演示