addRemoveLinks not working on my Dropzone

Question

I have looked at the documentation and have tried several methods online but the addRemoveLinks method is not working. It displays "Remove File" but is non-clickable and throws no error messages in the Javascript console. The view is from a .NET MVC 4 project and regardless of how I have set up my Dropzone I am not able to achieve the desired effect. The file uploading works but I would like the user to have the ability to remove the thumbnail/preview from the Dropzone after it has uploaded, or in the case the upload fails.

  <div class="jumbotron" style="margin-top: 4%">
       <div class="dropzone" id="dropzoneForm">
            <div class="fallback">
                   <input name="file" type="file" multiple />
                   <input type="submit" value="Upload" />
            </div>
      </div>
  </div>

<style type="text/css">

#dropzoneForm {
    background: #F0F0F0;
    border: 3px dotted #666;
    border-radius: 10px;
    width: 300px auto;
    height: 150px auto;
    padding-top: 35px;
    font-size: 14px;
    color: blue;
    vertical-align: middle;
    text-align: center;
}

.dz-file-preview {
    margin-top: -100px;
}

.dz-filename {
    font-size: 10px;
    color: blue;
    padding: 20px;
    margin-left: -25px;
    margin-bottom: 25px;
    word-wrap: normal;
}

.dz-processing {
    width: 400px;
}
</style>


<script>

Dropzone.options.dropzoneForm = {

    url: '@Url.Action("SaveUploadedFile", "Workflow")' + "?workflowInstanceID=" + '@Model.WorkflowInstanceID' + "&workflowID=" + '@Model.WorkflowID',
    paramName: "files",
    fileSizeBase: 1024,
    parallelUploads: 1,
    maxFiles: 25,
    maxFilesize: 10000,
    acceptedFiles: ".pdf, .bmp, .png, .jpg, .jpeg, .tiff, .gif, .png, .doc, .docx, .rtf, .xlsx, .xls, .doc, .docx, .txt, .3gp, .aac, .m4a, .mp3, .wav, .wma, .mp4, .avi, .mov, .3g2, .m4v, .mkv, .mpg, .m2v, .flac",
    createImageThumbnails: true,
    addRemoveLinks: true,

    dictDefaultMessage: "Drop File(s) Here or Click to Upload",

    queuecomplete: function () {     

    },

    init: function () {

        this.on("addedfile", function (file) {

            // Capture the Dropzone instance as closure.
            var _this = this;

            // Create the remove button
            var removeButton = Dropzone.createElement("<button data-dz-remove " +
                    "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>");

            // Listen to the click event
            removeButton.addEventListener("click", function (e) {
                // Make sure the button click doesn't submit the form:
                e.preventDefault();
                e.stopPropagation();

                // Remove the file preview.
                _this.removeFile(file);
                // If you want to the delete the file on the server as well,
                // you can do the AJAX request here.
            });

            // Add the button to the file preview element.
            file.previewElement.appendChild(removeButton);
        });


        this.on("complete", function (data) {
            var res = JSON.parse(data.xhr.responseText);

            if (this.getQueuedFiles().length == 0) {
                alert("File(s) were uploaded successfully.");

                $("#Grid").data("kendoGrid").dataSource.read(); //for Chrome
            }

        });

    }
};

Answer 1

After the "addRemoveLinks: true," line add in:

removedfile: function (file) {
var _ref;
return (_ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;        
},

Answer 2

In my case, adding the addRemoveLinks: true option did show the remove button, but unfortunately covered by the padding of the dz-details element, therefore it could not be triggered:

In that case it was enough to simply add the following css anywhere:

.dz-details {
  padding: 0 !important;
}