カスタム確認ダイアログを使用して、複数のアップロードされたファイルをdropzoneで削除できるようにするにはどうすればよいですか？

Question

アップロードされたファイルを削除するときに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); 
} 

削除ボタンをクリックすると、カスタム確認が表示されます。削除を確認でき、サムネイルは削除されます。

問題は、1つの画像に対してのみこれを行うことができることです。私が削除したい他の画像については、私のコンソールで次のエラーが表示されます。

あなたがそのボタンに適用されているイベントが

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

それとも、一度それを使用してDropzone.confirmに外にあなたの関数を置くことができ、同様に複数回呼び出されているため.on()を使用する前.off()を使用する必要が

Uncaught TypeError: Cannot read property 'removeChild' of null

Answer 1

以下のように、

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

とDOMを使用.remove()から要素を除去するため、

hideConfirm = function() { 
    $('body').removeClass('is-showing-confirm'); 
    $('#confirm-dialogue').remove(); 
} 

あなたは前にオフに追加して、要素（あなたが削除する）のような、

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