How to remove dynamically selected images before Submit

Question

I wonder how I can remove selected images from input file before sending them, I’m new in Javascript, I saw several examples, but without the implementation with the "Submit" button and I don’t know how to get these values, it would be something like this:

Something based on a post I’ve seen here in the community

Answer 1

Hello, take this example, maybe it will help you:

$(document).on("click", "[data-remove-file]", function (e) {

  e.preventDefault();
  
  $(e.target).closest("[data-row]").remove();

});

$(document).on("submit", "form", function (e) {

  //e.preventDefault();
  
  $(e.target).find("[data-mark-remove-file]").each(function (i, chk) {
    
    if ($(chk).is(":checked"))
      $(chk).closest("[data-row]").remove(); 
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<table>
  <tr data-row>
    <td><input type="file"></td>
    <td><input type="checkbox" data-mark-remove-file>remove before submit</td>
    <td><a href="#" data-remove-file>remove now</a></td>
  </tr>
  <tr data-row>
    <td><input type="file"></td>
    <td><input type="checkbox" data-mark-remove-file>remove before submit</td>
    <td><a href="#" data-remove-file>remove now</a></td>
  </tr>
  <tr data-row>
    <td><input type="file"></td>
    <td><input type="checkbox" data-mark-remove-file>remove before submit</td>
    <td><a href="#" data-remove-file>remove now</a></td>
  </tr>
</table>

<button>submit</button>

</form>