JavaScript Delete Cancel Confirm

Demonstration

• Jack Delete Cancel
• Kate Delete Cancel
• Leonard Delete Cancel

Explanation

Demonstrates having a delete button which asks for cancel or confirm.

The actual deletion is in a span element and may have an (inline) form.

• 0. On clicking the delete button:

  that button is hidden and a cancel and confirm button appears inline.

• 1. If cancel is clicked:

  the cancel and delete buttons are hidden and delete button appears

• 2. If confirm is clicked:

  the action is taken which should lead to a page refresh.

  If the action does not refresh the page (eg.Ajax) the same as clicking cancel should occur after the action has been taken.

• 3. If a different delete button is clicked:

  that delete button is hidden and the sibling cancel and confirm appear

  the other delete button appear and its sibling cancel and confirm hidden.

HTML

<span class='delete-span'>
    <button class='delete-btn'>Delete</button>
    <button class='cancel-btn' style='display:none'>Cancel</button>
    <form class='confirm-el' method='post' style='display:none'>
        <input type='submit' value='Confirm'>
    </form>
</span>
    

JavaScript

<script>
    const deleteSpans = document.querySelectorAll('.delete-span');
    const deleteBtns = document.querySelectorAll('.delete-btn');
    const cancelBtns = document.querySelectorAll('.cancel-btn');
    const confirmEls = document.querySelectorAll('.confirm-el');

    deleteSpans.forEach(function(el){
        el.addEventListener('click', function(event){
            // Delete btn was clicked
            // First hide all cancels and confirms and show all deletes
            // Then hide this span's delete btn and show its cancel and confirm siblings
            if(event.target.classList.contains('delete-btn')){
                cancelBtns.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                confirmEls.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                deleteBtns.forEach(function(el){
                    el.setAttribute('style', 'display:inline');
                });
                const deleteBtn = event.target.parentNode.querySelectorAll('.delete-btn');
                deleteBtn[0].setAttribute('style', 'display:none');
                const cancelBtn = event.target.parentNode.querySelectorAll('.cancel-btn');
                cancelBtn[0].setAttribute('style', 'display:inline');
                const confirmEl = event.target.parentNode.querySelectorAll('.confirm-el');
                confirmEl[0].setAttribute('style', 'display:inline');
            }
            // Cancel btn was clicked
            // Hide all cancel and confirms
            // Show this span's delete btn
            if(event.target.classList.contains('cancel-btn')){
                cancelBtns.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                confirmEls.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                const deleteBtn = event.target.parentNode.querySelectorAll('.delete-btn');
                deleteBtn[0].setAttribute('style', 'display:inline');
            }
            // Confirm btn was clicked
            // As for Cancel btn (action should be taken separately)
            if(event.target.classList.contains('confirm-button')){
                // Action should be taken by a different event listener
                // That event listener may be on the form submit input element
                // This is for cases where a refresh does not happen eg. Ajax
                // The implementation is the same for clicking on the cancel-btn
                cancelBtns.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                confirmEls.forEach(function(el){
                    el.setAttribute('style', 'display:none');
                });
                const deleteBtn = event.target.parentNode.querySelectorAll('.delete-btn');
                deleteBtn[0].setAttribute('style', 'display:inline');
            }
        });
    });
</script>