How can I make it possible to delete 1 image from the 5 sent to the input? That’s how I added a preview of the attached images to the input file

                <script>
                window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("file");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}               
        </script>

<div><input style=" border: solid 1px #2a2f40; padding: 10px; width: auto; margin: 5px 0;" type="file" name="file[]" id="file" multiple="multiple"  accept=".jpg, .jpeg, .png" onchange="loadFile(event)" ><legend style="font-size:10px;">(jpg, jpeg, png) Max file size: 15 MB.</legend></p>
                <div id="result" class="uploadPreview"></div></div>