Aquí estoy tratando de lograr cargar varias imágenes con vista previa y lo logré, pero ahora el problema es cómo elimino imágenes de la vista previa después de hacer clic en el botón x y también elimino esa imagen de su matriz let item_images = []; ? Apreciaría cualquier ayuda.
function previewImage(e, selectedFiles, imagesArray) { const elemContainer = document.createElement('div'); elemContainer.setAttribute('class', 'item-images'); for (let i = 0; i < selectedFiles.length; i++) { imagesArray.push(selectedFiles[i]); const elem = document.createElement('img'); elem.setAttribute('src', URL.createObjectURL(e.target.files[i])); elem.setAttribute('class', 'item-photo__preview') const removeButton = document.createElement('button'); removeButton.setAttribute('type', 'button'); removeButton.innerHTML = '<span>×</span>' elemContainer.appendChild(elem); elemContainer.appendChild(removeButton); } return elemContainer; } let item_images = []; document.querySelector('#photo-upload').addEventListener('change', (e) => { let selectedFiles = e.target.files; const photoPreviewContainer = document.querySelector('#photo-upload__preview'); const elemContainer = previewImage(e, selectedFiles, item_images); photoPreviewContainer.appendChild(elemContainer); }); .item-photo__preview { width:150px; height: 150px; } <div class="item-upload"> <input id="photo-upload" type="file" multiple/> <div id="photo-upload__preview" class="upload-preview"></div> </div>Delegar:
function previewImage(e, selectedFiles, imagesArray) { const elemContainer = document.createElement('div'); elemContainer.setAttribute('class', 'item-images'); for (let i = 0; i < selectedFiles.length; i++) { imagesArray.push(selectedFiles[i]); const imageContainer = document.createElement('div'); const elem = document.createElement('img'); elem.setAttribute('src', URL.createObjectURL(selectedFiles[i])); elem.setAttribute('class', 'item-photo__preview') const removeButton = document.createElement('button'); removeButton.setAttribute('type', 'button'); removeButton.classList.add('delete'); removeButton.dataset.filename = selectedFiles[i].name, removeButton.innerHTML = '<span>×</span>' imageContainer.appendChild(elem); imageContainer.appendChild(removeButton); elemContainer.appendChild(imageContainer); } return elemContainer; } let item_images = []; document.getElementById('photo-upload').addEventListener('change', (e) => { let selectedFiles = e.target.files; const photoPreviewContainer = document.querySelector('#photo-upload__preview'); const elemContainer = previewImage(e, selectedFiles, item_images); photoPreviewContainer.appendChild(elemContainer); }); document.getElementById('photo-upload__preview').addEventListener('click', (e) => { const tgt = e.target.closest('button'); if (tgt.classList.contains('delete')) { tgt.closest('div').remove(); const fileName = tgt.dataset.filename item_images = item_images.filter(img => img.name != fileName) } }) .item-photo__preview { width: 150px; height: 150px; } <div class="item-upload"> <input id="photo-upload" type="file" multiple/> <div id="photo-upload__preview" class="upload-preview"></div> </div>