Umsetzung Entfernen von Schaltflächen für jQuery-File-Upload

Ich vielleicht nähert sich diese mit einer völlig falschen Vorstellung, so lassen Sie mich meine situation erklären ersten.

Was ich versuche zu erreichen mit jQuery-File-Upload ist, um dem Benutzer zu ermöglichen, wählen Sie die Dateien, die Sie hochladen. Sie werden erlaubt, um mehrere Dateien auszuwählen. Für jetzt ist es egal, welche Art, aber Sie werden vor allem das hochladen von Bildern. Die ausgewählten Dateien erscheinen dann in einer Liste mit der Schaltfläche "entfernen" rechts neben dem Dateinamen für jede Datei. Wie im Bild unten.

Wie kann ich die implementieren ein Mittel, das dem Benutzer erlaubt, die Datei zu löschen, die Sie ausgewählt haben, aus der Liste der Dateien, die erwarten hochladen?

Sobald der Benutzer fühlt sich wohl mit Ihrer Auswahl der Dateien, die Sie klicken Sie auf die "Start Upload" - button, startet das hochladen der Dateien in der Liste enthalten und Auslöser der Fortschrittsbalken oben abgebildet.

Habe ich versucht, einige der Fehlersuche selbst einschließlich der Protokollierung Ereignisse, die passieren, wenn die Schaltfläche geklickt wird, aber nicht verwalten können, um es zu entfernen aus der Liste der Dateien zum upload ausgewählt. Ich weiß, es ist ein drop callback-aber ich bin mir nicht sicher, ob das ist, was ich verwenden soll.

Unten ist mein code.

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: '../php/',
        add: function (e, data) {
            //$.each(data.files, function(index, file) {
                data.context = $('<li class=\"list-group-item\">')
                    //.html(file.name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
                    //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+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-trash\"></span></button>")
                    .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) {
                $('<p/>').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();
    });
});

Schließlich sollte all dies in meinem $(document).ready?

Ich wissen, dass dies möglicherweise ein re-post von dieser Beitrag aber das sind zwei Fragen in einer, wo hier dachte ich, unterteilen Sie es in kleinere Probleme.