Estoy tratando de restablecer la vista previa de la imagen creada por la entrada del archivo cada vez que se hace clic en el botón de carga. Soy nuevo en JS, así que perdóname si me perdí lo obvio.

Este es un fragmento de código que encontré para mostrar la vista previa:

 $(function() { var imagesPreview = function(input, placeToInsertImagePreview) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML('<img class="padit">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

Este es mi HTML:

 <div class="upload-field"> <label class="bcard-label" for="gallery-photo-add"> <input id="gallery-photo-add" type="file" accept="image/*" value="" multiple> <i class="fa fa-2x fa-camera"></i> </label> </div> <div class="gallery"> </div>

Este es el CSS:

 .upload-field{ display: flex; justify-content: center; align-items: center; max-width: 95%; border: 4px dashed grey; height: 100px; margin: auto; } .gallery{ display: inline-block; column-count: 2; margin: 15px; } img.padit{ padding: 5px; }

Y con mi muy poco conocimiento en JS traté de completar la tarea con este fragmento:

 const element = document.getElementById("gallery-photo-add"); element.addEventListener("click", function() { document.getElementById("padit").remove();

¿Alguna idea de dónde me equivoco? Gracias :)