删除动态添加的复选框和相应的图像 [英] Remove dynamically added checkboxes and corresponding images

问题描述

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

I have a button which opens a file selector window. When the user selects a file, the script uploads that image to a div with a checkbox.

这是删除复选框和图像的脚本部分，但它

This is the part of the script that removes the checkbox and image, but it is currently removing the parent element as well.

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

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

How can I remove all checked checkboxes and their corresponding images when the delete button is clicked?

jsFiddle

jsFiddle

推荐答案

您需要更改插入 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

（演示）

这篇关于删除动态添加的复选框和相应的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！