title: Implementing Remove Buttons for jQuery-File-Upload
body: <p>I may be approaching this with an entirely wrong idea so let me explain my situation first.  </p>
  
  <p>What I'm trying to achieve using jQuery-File-Upload is to allow the user to select files they choose to upload. They will be allowed to select multiple files. For now it doesn't matter what type but they'll mainly be uploading images. The selected files will appear in a list with a "remove" button to the right of the filename for each file. As pictured below.  </p>
  
  <p><img src="https://i.stack.imgur.com/qLbyQ.png" alt="Basic setup of jQuery-File-Upload"></p>
  
  <p><strong>How can I implement a means of allowing the user to remove the file they've selected from the list of files that are awaiting upload?</strong></p>
  
  <p>Once the user feels comfortable with their selection of files they will click the 'Start Upload' button which will begin uploading the files contained in the list and trigger the progress bar pictured above.  </p>
  
  <p>I've tried some troubleshooting myself including logging out events that happen when the button is clicked but can't manage to remove it from the list of files selected for upload. I know there is a <code>drop</code> callback but I'm not sure if that's what I should be using.</p>
  
  <p>Below is my code.</p>
  
  <pre><code>$(function () {
      $('#fileupload').fileupload({
          dataType: 'json',
          url: '../php/',
          add: function (e, data) {
              //$.each(data.files, function(index, file) {
                  data.context = $('&lt;li class=\"list-group-item\"&gt;')
                      //.html(file.name+"&lt;button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"&gt;&lt;span class=\"glyphicon glyphicon-remove\"&gt;&lt;/span&gt;&lt;/button&gt;")
                      // see https://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below
                      .html(data.files[0].name+"&lt;button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"&gt;&lt;span class=\"glyphicon glyphicon-trash\"&gt;&lt;/span&gt;&lt;/button&gt;")
                      .appendTo(".list-group");
                  /*$('.btn-danger').on('click', function() {
                      console.log('Drop '+file.name+' \n');
                  });*/
              //});
              $('.btn-danger').on('click', function(e, data) {
                  //console.log("Removing all objects...\n");
                  //data.context.remove(data.files[0].name);
                  //data.context.remove(data.files[0]);
                  e.preventDefault();
                  /*var filename = $(this).parent().text();
                  console.log("Filename: "+filename);
                  data.context.remove(data.files.filename);
                  console.log("Clicked the drop button");*/
                  try { // here I try thinking that I can call the drop() callback but I'm still trying to wrap my head around how this all works.
                      drop(e, data);
                  } catch(error) {
                      console.log("The error was: "+error);
                  }
              });
  
  
          },
          submit: function (e, data) {
              $('#start-upload').on('click', function() {
                  //$('#start-upload').addClass('#disabledInput');
                  console.log("This is the start upload button!");
              });
          },
          done: function (e, data) {
              /*$.each(data.result.files, function (index, file) {
                  $('&lt;p/&gt;').text(file.name).appendTo('.files').find('#panel-body');
              });*/
          },
          progressall: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              $('#progress .bar').css(
                  'width',
                  progress + '%'
              );
          },
          drop: function (e, data) {
              $.each(data.files, function (index, file) {
                  //$('.btn-danger').on('click', function() {
                      console.log('Dropped file: '+ file.name +'\n');
                  //});
              });
          }
      }).on('.fileuploadsubmit', 'click', function(e, data) {
          console.log("Submit button pressed.");
          //data.formData = data.context.find(':input').seralizeArray();
      });
  });
  </code></pre>
  
  <p><strong>Lastly, should all of this be placed inside my <code>$(document).ready</code>?</strong></p>
  
  <p><em>I do realize that this may be a re-post of <a href="https://stackoverflow.com/questions/27074087/customizing-the-jquery-file-upload-basic-plugin">this post</a> but that's two questions in one where here I figured I subdivide it into smaller problems.</em></p>