Javascript 如何允许使用自定义确认对话框使用dropzone删除多个上载的文件？

我想覆盖Dropzone在删除上传文件时处理确认对话的默认方式，在某种程度上，我几乎做到了这一点。这是我的密码

Dropzone.confirm = function(question, accepted, rejected) {
    showConfirm(question);
    $(document).on('click', '#accept-confirm', function() {
        hideConfirm();
        accepted();
    });
}

showConfirm = function(question) {
    var confirm_dialogue = '<div id="confirm-dialogue"><span class="question">'+question+'</span><button id="deny-confirm" class="button">Cancel</button><button id="accept-confirm" class="button">Yes</button></div>';
    $('body').append(confirm_dialogue).addClass('is-showing-confirm');
}

hideConfirm = function() {  
    $('body').removeClass('is-showing-confirm');
    let dialogue = document.getElementById('confirm-dialogue');
    dialogue.parentNode.removeChild(dialogue);
}

Dropzone.confirm=功能（问题、接受、拒绝）{
确认（问题）；
$（文档）。在（'单击'，'接受确认'，函数（）上）{
hideConfirm（）；
已接受（）；
});
}
showConfirm=功能（问题）{
var确认对话=''+问题+'取消是'；
$（'body'）.append（确认对话）.addClass（'is-showing-confirm'）；
}
hideConfirm=函数（）{
$（'body'）.removeClass（'is-showing-confirm'）；
let dialogue=document.getElementById（'confirm-dialogue'）；
dialogue.parentNode.removeChild（dialogue）；
}

我可以单击我的删除按钮，并显示我的自定义确认。我可以确认删除并删除缩略图

问题是，我只能对一张图像执行此操作。对于我想要删除的任何其他图像，我的控制台中只会出现以下错误

未捕获的TypeError:无法读取null的属性“removeChild”

您需要在使用

.on（）

之前使用，因为应用于该按钮的事件会被多次调用，例如

Dropzone.confirm = function(question, accepted, rejected) {
    showConfirm(question);
    $(document).off('click', '#accept-confirm').on('click', '#accept-confirm', function() {
        hideConfirm();
        accepted();
    });
}

或者您可以使用它一次，然后将您的功能放在

Dropzone之外。确认

Dropzone.confirm = function(question, accepted, rejected) {
     showConfirm(question);
}
// now it will be called once only,
$(document).on('click', '#accept-confirm', function() {
    hideConfirm();
    accepted();
});

以及从DOM使用中删除元素

可以检查元素（要删除的元素）的长度，如下所示：

第一个答案有效，先加后开。我不完全理解你所说的应用于按钮的事件被多次调用是什么意思，但它确实有效。第二个失败，因为接受的（）回调在Dropzone.confirm之外不可用。谢谢，我的意思是，当您的确认函数第一次调用时，您的
accept Confirm
click事件将绑定到DOM，并且每当您的确认函数调用时，它将一次又一次地绑定它。因此，在单个元素上添加了多个单击事件。这就是为什么您的
hideConfirm
一次又一次地调用，这导致了
removeChild
的问题。
hideConfirm = function() {  
    $('body').removeClass('is-showing-confirm');
    $('#confirm-dialogue').remove();
}

dialogue && dialogue.parentNode.removeChild(dialogue);