How to customize popup window from data: [confirm: Are you sure]?

Hi guys!

I have delete button something like this..
ve delete button something like this..

<%= button to: recipient_path(@conn, :delete, recipient.id), method: "delete",  data: [confirm: Are you sure],  class: "btn btn-danger delete-each-button" do %>
 <i class="material-icons icon-button">close</i>Delete
<% end %> 

and as you all know, it shows me a pop up window for confirm. but it is not pretty.
So I want to customize it with sweetalert2 javascript library.
But I don’t know how i can cancel the event and re-trigger the event.

I was doing something like this..

 var buttons = document.querySelectorAll('.delete-each-button');
  if(buttons.length !== 0) {
    buttons.forEach(function(button) {
      button.addEventListener('click', function(e){
        e.preventDefault();
         // sweetalert2 code..
        window.swal({
          title: 'Are you sure?',
          text:  'Remove contacts from Recipients List.',
          showCancelButton: true,
          confirmButtonColor: '#f44336',
          cancelButtonColor:  '#333333',
          confirmButtonText: 'Yes, Delete it!'
        }).then((result) => {
          if(result.value) {
            $(this).trigger('click');
          }
        })
      })
    })
  }

this code didn’t prevent default delete action with e.preventDefault();
How can I do this?