Question

我有一个打开文件选择器窗口的按钮。当用户选择文件时，脚本会将该图像上传到带有复选框的div。

这是删除复选框和图像的脚本部分，但它当前也删除了父元素。

$("#imageForm").on('click', 'input[value="Delete"]', function () {
    $('#iso_preview').has('input:checkbox:checked').remove()
});

单击删除按钮时，如何删除所有选中的复选框及其对应的图像？

jsFiddle

Answer 1

您需要更改插入fileUpload()函数，以便图像包含在内部包装器中。更改以下行

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

然后你需要在这一行稍作修改

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

选择#iso_preview div代替#iso_preview

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

这将删除div

中包含已选中复选框的所有#iso_preview元素

（Demo）

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

1 个答案: