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

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

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

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

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

的jsfiddle

Answer 1

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

 if (imageType.test(file.type)) { fileTemp = document.createElement("img"); $("#iso_preview").append("
"); fileTemp.classList.add("preview_image"); } else{ fileTemp = document.createElement('div'); fileTemp.classList.add('div'); } fileTemp.file = file; $('#'+preview).append(fileTemp); 

对此……

 var container = $("
"); 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(); 

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

（ 演示 ）