Exclude child node from data-href functionality

Question

I have a table where I use the data-href attribute on each row, so that I can visit each row's corresponding page. At the end of each row I have put an 'edit' and a 'delete' button. They were working normally until I added sweet alert 2 confirmation modal. The problem is that when I click on the delete button the data-href of the parent tr node is triggered (along with the delete functionality). How can I exclude this button (or even the whole delete form) from the tr data-href functionality?

The tr node:

<tr data-href="view_client/{{ $client->id}}">     
   <td><strong>{{$client->surname }}</strong></td>
   ...
   <td style="width:15%" >
        <div class="d-flex justify-content-evenly">
             <a href="/edit_client/{{ $client->id }}" class="btn btn-sm btn-warning flex-fill">
             <i class="far fa-edit"></i>Edit</a>
             <form action="/clients/{{ $client->id }}" id="deleteForm" method="POST">
             @method('DELETE')
             @csrf
                  <button type="button" class="btn btn-danger show_confirm"><i class="far fa-trash-alt"></i></button>
             </form>
        </div>
   </td>
</tr>

The js of the show_confirm:

$('.show_confirm').on('click', function(e) {
        var form =  $('#deleteForm');
        e.preventDefault();
        Swal.fire({
            title: "Delete Confirmation",
            text: "Are you sure?",
            icon: "warning",
            showCancelButton: true,
              confirmButtonColor: '#ff0f15',
              cancelButtonColor: '#ed032d9e9e9e',
              confirmButtonText: 'Yeah! Go ahead!'
        })
        .then((willDelete) => {
          if (willDelete.isConfirmed) {
            form.trigger('submit');
          }
        });
    });

Answer 1

It looks like you need to prevent the click on a child element from bubbling up to the parent. That can be done with a call to event.stopPropagation() for an explanation read the second paragraph here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
So, in your event handler just add the call:

    $('.show_confirm').on('click', function(e) {
        var form =  $('#deleteForm');
        e.preventDefault();
        e.stopPropagation(); // <---here
        Swal.fire({
            title: "Delete Confirmation",
            text: "Are you sure?",
            icon: "warning",
            showCancelButton: true,
              confirmButtonColor: '#ff0f15',
              cancelButtonColor: '#ed032d9e9e9e',
              confirmButtonText: 'Yeah! Go ahead!'
        })
        .then((willDelete) => {
          if (willDelete.isConfirmed) {
            form.trigger('submit');
          }
        });
    });