title: PHP Javascript - cannot change selector onclick to Remove preview file
body: <p>I'm doing upload multiple files(use <code>&lt;input type="file" multiple/&gt;</code>) with preview image file  and can remove the image preview and filedata successfully.</p>
  
  <p>but the problem is, I cannot change the selector for onclick to remove filedata.
  (If I change to other selector, it will only remove the preview image  but the filedata still be uploaded to my folder)</p>
  
  <p>The selector for click to remove that work successfully is <code>.selFile</code> but when
  I want to change selector for onclick to <code>.selFile2</code> it will not remove filedata) </p>
  
  <p>these are my focus line of code. (To see my Full code, Please look on bottom) </p>
  
  <pre><code>    var html = "&lt;div&gt;&lt;img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' 
  title='Click to remove'&gt; &lt;span class='selFile2'&gt;" + f.name + "&lt;/span&gt;&lt;br clear=\"left\"/&gt;&lt;/div&gt;";
  </code></pre>
  
  <p>..</p>
  
  <p>I change from </p>
  
  <pre><code>$("body").on("click", ".selFile", removeFile);
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$("body").on("click", ".selFile2", removeFile);
  </code></pre>
  
  <p>but it remove preview image only  not remove filedata (it's still be uploaded to my folder)
  ..</p>
  
  <p>And I try to change code in <code>function removeFile(e)</code>
  from <code>var file = $(this).data("file");</code> to <code>var file = $('.selFile).data("file");</code>   the result is It can remove only 1 filedata. 
  ...
  How could I do?</p>
  
  <p>Here is my full code  (2 pages)</p>
  
  <p>firstpage.html   (I use ajax to post form)</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Proper Title&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      #selectedFiles img {
          max-width: 200px;
          max-height: 200px;
          float: left;
          margin-bottom:10px;
          cursor:pointer;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;       
      &lt;form id="myForm" method="post"&gt; 
          Multiple Files: &lt;input type="file" id="files" name="files[]" multiple&gt;&lt;br/&gt;
  
          &lt;div id="selectedFiles"&gt;&lt;/div&gt;
  
          &lt;input type="submit"&gt;
      &lt;/form&gt;
  
      &lt;script&gt;
      var selDiv = "";
      var storedFiles = [];
  
      $(document).ready(function() {
          $("#files").on("change", handleFileSelect);
  
          selDiv = $("#selectedFiles"); 
          $("#myForm").on("submit", handleForm);
  
          $("body").on("click", ".selFile", removeFile);
      });
  
      function handleFileSelect(e) {
          var files = e.target.files;
          var filesArr = Array.prototype.slice.call(files);
          filesArr.forEach(function(f) {          
  
              if(!f.type.match("image.*")) {
                  return;
              }
              storedFiles.push(f);
  
              var reader = new FileReader();
              reader.onload = function (e) {
                  var html = "&lt;div&gt;&lt;img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'&gt; &lt;span class='selFile2'&gt;" + f.name + "&lt;/span&gt;&lt;br clear=\"left\"/&gt;&lt;/div&gt;";
                  selDiv.append(html);
  
              }
              reader.readAsDataURL(f); 
          });
  
      }
  
      function handleForm(e) {
          e.preventDefault();
  
          var data = new FormData();
  
          for(var i=0, len=storedFiles.length; i&lt;len; i++) {
              data.append('files[]', storedFiles[i]);
          }
  
          var xhr = new XMLHttpRequest();
          xhr.open('POST', 'upload.php', true);
  
          xhr.onload = function(e) {
              if(this.status == 200) {
                  console.log(e.currentTarget.responseText);  
                  alert(e.currentTarget.responseText + ' items uploaded.');
              }
          }
  
          xhr.send(data);
      }
  
      function removeFile(e) {
          var file = $(this).data("file");
          for(var i=0;i&lt;storedFiles.length;i++) {
              if(storedFiles[i].name === file) {
                  storedFiles.splice(i,1);
                  break;
              }
          }
          $(this).parent().remove();
      }
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>..
   upload.php page</p>
  
  <pre><code>for($i=0;$i &lt; count($_FILES["files"]["name"]);$i++)
      {
          if($_FILES["files"]["name"][$i] != "") 
          {       
              $tempFile = $_FILES['files']['tmp_name'][$i];                     
  
              $targetFile =  "upload/". $_FILES["files"]["name"][$i];  
  
              move_uploaded_file($tempFile,$targetFile);      
          }
      }
  </code></pre>