How can I use a modal as additional step before my function executes another upon user approval?

Question

I have a delete icon of an element which shows a modal to ask for the users approval. Once the user approves it should fire another function to delete another element.

First I call the modal

// Function to delete a benefit
$('.delete-benefit').on('click', function(e) {
    let id = $(this).closest('.benefit-wrapper-id').attr('id');  // Get the id
    call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', delete_benefit(id))

    // Only execute this function if modal's button with id 'confirm-button' was clicked
    delete_benefit(id) // Delete the benefit
})

// Call the modal
  function call_modal(title, text, func) {
      $('#modalTitle').html(title) // Set some texts
      $('#modalText').html(text) // Set some texts
      $('#modal-wrapper').show() // Open it
  }

// Eventlistener for the modal to execute the passed function upon approval

  // Execute the passed function on confirm
  document.getElementById("confirm-button")
        .addEventListener("click", () => {
          func()
  }, false);

I tried to pass the delete_benefit(id) function to the modal but this somehow didn't work out as intended (as I want to apply this logic to multiple functions using the same modal component). How to accomplish this / what is a typical workflow here?

Answer 1

In this approach I'm passing information about what should happen when pressing the confirm button directly to the button element itself, via data-attributes:

 // Function to delete a benefit $('.delete-benefit').on('click', function(e) { let id = $(this).closest('.benefit-wrapper-id').attr('id'); // Get the id call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', 'delete', id) }) // Call the modal function call_modal(title, text, intent, id) { $('#confirm-button').attr('data-intent', intent) // WHAT SHOULD THE CONFIRMATION DO $('#confirm-button').attr('data-id', id) // WHICH ID IS AFFECTED BY THE CONFIRMATION $('#modalTitle').html(title) // Set some texts $('#modalText').html(text) // Set some texts $('#modal-wrapper').show() // Open it } // Eventlistener for the modal to execute the passed function upon approval // Execute the passed function on confirm document.getElementById("confirm-button").addEventListener("click", function() { let intent = $(this).attr('data-intent') switch (intent) { case 'delete': delete_benefit($(this).attr('data-id')) break; } $(this).attr('data-intent', '') $(this).attr('data-id', '') }, false); function delete_benefit(id) { console.log('Delete benefit: ', id) }

 #modal-wrapper { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="benefit-wrapper-id" id="35"> <button class="delete-benefit">delete</button> </div> <div id="modal-wrapper"> <div id="modalTitle"></div> <div id="modalText"></div> <button id="confirm-button">Confirm</button> </div>