拖放 jquery 删除问题答案

【问题标题】：drag and drop jquery remove Issue拖放 jquery 删除问题
【发布时间】：2014-06-19 09:37:48
【问题描述】：

我已经实现了这个拖放：http://hayageek.com/drag-and-drop-file-upload-jquery/。

它工作正常，但是，我的问题如下：

我添加一个文件，然后删除它。当我添加另一个文件时，“已删除”文件再次出现，但没有删除按钮...

我很想解决这个问题。

我认为问题出在处理程序或删除函数中。但我找不到它。也许我需要休息一下……

$(document).ready(function () {

$("#errorMessages").hide();
// Handle drag and drop events with jQuery
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
});
obj.on('drop', function (e) {
    $(this).css('border', '2px dotted #0B85A1');
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;
    cleanErrorMessages();
    //We need to send dropped files to Server
    handleFileUpload(files, obj, uploadURL);
});

// If the files are dropped outside the div, file is opened in the browser window. To avoid that we can prevent ‘drop’ event on document.
$(document).on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

$("#file").change(function () {
    cleanErrorMessages();
});

// add file to the list using the input
$("#addFile").click(function (evt) {
    evt.preventDefault();
    var files = $("#file")[0].files;
    handleFileUpload(files, obj);
    $("#file").val("");
    return false;
});

});

还有更多的代码，但我认为问题一定出在这部分。如果我找到解决方案，我也会发布它。

删除功能：

this.remove.click(function (evt) {
    // TO DO:  call to the WS to remove from the server 
    var numrow = evt.currentTarget.parentElement.attributes[1].value;
        evt.currentTarget.parentElement.removeChild(evt.currentTarget);
    $(".statusbar[numrow='" + numrow + "']").fadeOut(1000, "easeInOutCubic", function (evt) {
    });
});

【问题讨论】：

是的，对不起，我编辑帖子
我添加了删除功能，也许是这个问题，我正在尝试......

标签： jquery drag-and-drop

【解决方案1】：

更改了删除功能：

this.remove.click(function (evt) {
    // TO DO:  call to the WS to remove from the server 
    var numrow = evt.currentTarget.parentElement.attributes[1].value;
        evt.currentTarget.parentElement.remove(evt.currentTarget);
    $(".statusbar[numrow='" + numrow + "']").fadeOut(1000, "easeInOutCubic", function (evt) {
    });
});

只需要更改：evt.currentTarget.parentElement.removeChild(evt.currentTarget); 为此：evt.currentTarget.parentElement.remove(evt.currentTarget);。

【讨论】：