Делаю загрузку изображений. Изображения добавляются. Подскажите пожалуйста как сделать возможность удалять изображения. Спасибо Почему-то я не могу удалить изображения таким образом
const cartBlockInputFile = document.querySelectorAll('.photo-checkout__input-file');
if (cartBlockInputFile) {
cartBlockInputFile.forEach(el => {
el.addEventListener('change', (event) => {
var file = event.target.files; // FileList object
for (var i = 0, f; f = file[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
alert("Image only please....");
}
var reader = new FileReader();
const inputImg = document.querySelectorAll('.photo-checkout__input-file-img');
var span = document.createElement('span');
const inputRemove = document.querySelectorAll('.photo-checkout__input-file-remove span');
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function cartBlockFileMask(e) {
// Render thumbnail.
span.className = 'preview'
span.innerHTML = [
'<div class="photo-checkout__input-file-remove _icon-close">Удалить</div>' +
'<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'
].join('');
inputImg.forEach(img => {
img.classList.add("_active")
img.insertBefore(span, null);
});
};
})(f);
if (inputRemove) {
inputRemove.forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.preview');
item.remove();
event.value = ''; // ключевая строка
});
});
}
reader.readAsDataURL(f);
};
});
});
};
.photo-checkout__block {
position: relative;
cursor: pointer;
display: flex;
width: 100%;
}
.photo-checkout__input-file-img {
display: flex;
width: 0;
height: 0;
border-radius: 5px;
}
.photo-checkout__input-file-img._active {
width: 100%;
height: 120px;
}
.photo-checkout__input-file-img span {
position: relative;
width: 165px;
height: 120px;
margin: 0px 20px 0px 0px;
}
.photo-checkout__input-file-img span:hover .photo-checkout__input-file-remove {
opacity: 1;
pointer-events: auto;
}
.photo-checkout__input-file-img span img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.photo-checkout__input-file span {
display: flex;
width: 100%;
height: 100%;
border-radius: 5px;
}
.photo-checkout__input-file input {
cursor: pointer;
min-width: 165px;
height: 120px;
opacity: 0;
position: absolute;
border-radius: 5px;
}
.photo-checkout__input-file label {
display: inline-flex;
align-items: center;
cursor: pointer;
width: 165px;
height: 120px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 500;
font-size: 14px;
background: #ffffff;
transition: all 0.3s ease 0s;
color: #000000;
}
.photo-checkout__input-file label::before {
content: "+";
font-size: 18px;
width: 15px;
height: 15px;
margin: 0px 0px 10px 0px;
color: #000000;
}
.photo-checkout__input-file-remove {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
border-radius: 5px;
background: linear-gradient(
0deg,
rgba(54, 108, 217, 0.8),
rgba(54, 108, 217, 0.8)
);
font-weight: 500;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #ffffff;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease 0s;
pointer-events: none;
}
<div class="photo-checkout__block">
<div class="photo-checkout__input-file">
<input type="file" id="file" name="file" class="file">
<label>Фотография<br> товара</label>
<div class="photo-checkout__input-file-img"></div>
</div
</div>