title: How do I remove a file selection from file uploads when multiple files is selected with X button near the image preview with asp.net and jquery
body: <p>I'm trying to create a site where I can have multiple file upload sections, where the user can upload multiple files. My problem comes from allowing the user to 'remove' a file from the upload list, before it's uploaded.</p>
  <p><strong>.aspx</strong></p>
  <pre><code>&lt;label for=&quot;inputAddress&quot;&gt;Select Media&lt;/label&gt;
                          &lt;div class=&quot;input-group mb-4&quot;&gt;
                              &lt;div class=&quot;custom-file&quot;&gt;
                                  &lt;asp:FileUpload ID=&quot;ImageUploadsFP&quot; runat=&quot;server&quot; AllowMultiple=&quot;true&quot; accept=&quot;image/*&quot; onchange=&quot;ShowImagePreview(this);&quot; class=&quot;multi&quot; /&gt;
                                  &lt;asp:RegularExpressionValidator ID=&quot;RegularExpressionValidator1&quot; ValidationExpression=&quot;([a-zA-Z0-9\s_\\.\-:])+(.png|.PNG|.JPG|.jpg|.gif|.GIF|.mp4|.MP4|.MPV|.mpv|.mov|.MOV)$&quot;
                                      ControlToValidate=&quot;ImageUploadsFP&quot; runat=&quot;server&quot; ForeColor=&quot;Red&quot; ErrorMessage=&quot;Please select a valid image file (.jpg / .png / .gif/ .mp4 / .mpv / .mov)&quot;
                                      Display=&quot;Dynamic&quot; /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;input-group mb-4&quot;&gt;
                              &lt;div id=&quot;previewImages&quot;&gt;
                                  &lt;%--&lt;asp:Image ID=&quot;ImgPrv&quot; Height=&quot;150px&quot; Width=&quot;240px&quot; runat=&quot;server&quot; /&gt;--%&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  <p>These are my jquery codes</p>
  <pre><code>&lt;script language= &quot;javascript&quot; type = &quot;text/javascript&quot; &gt;
          $(function () {
              $(&quot;[id*=ImageUploadsFP]&quot;).change(function () {
                  if (typeof (FileReader) != &quot;undefined&quot;) {
                      var previewImages = $(&quot;#previewImages&quot;);
                      previewImages.html(&quot;&quot;);
                      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
                      $($(this)[0].files).each(function () {
                          var file = $(this);
                          if (regex.test(file[0].name.toLowerCase())) {
                              var reader = new FileReader();
                              reader.onload = function (e) {
                                  var img = $(&quot;&lt;img /&gt;&quot;);
                                  img.attr(&quot;style&quot;, &quot;height:150px;width: 200px&quot;);
                                  img.attr(&quot;src&quot;, e.target.result);
                                  previewImages.append(img);
                              }
                              reader.readAsDataURL(file[0]);
                          } else {
                              alert(file[0].name + &quot; is not a valid image file.&quot;);
                              previewImages.html(&quot;&quot;);
                              return false;
                          }
                      });
  
                  } else {
                      alert(&quot;This browser does not support HTML5 FileReader.&quot;);
                  }
              });
          });
  &lt;/script&gt;
  </code></pre>
  <p>How do i create a &quot;X&quot; button with the existing jquery script as I have tried multiple ways but it don't work.</p>