I'm trying to reset the image preview created by file input each time the upload button clicks. I'm new to JS so forgive me if I missed the obvious.

This is a code snippet I found to show the preview:

$(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');
});
});

This is my 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>

This is the 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;
}

And with my very little knowledge in JS I tried to complete the task with this snippet:

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

Any ideas where am I wrong? Thanks :)