You need to stop the inner click event on the a element from propagating up the DOM to the tr for it to be caught there too.

To do this, and also to improve the quality of your code, use unobtrusive event handlers which are assigned in JS code, not in your HTML. From there you can access the event as an argument to the event handler and call stopPropagation() on it.

As you've tagged the question with jQuery, here's how to do it:

$('.bagList').on('click', e => {
  let itemId = $(e.currentTarget).data('item-id');
  
  // redirect logic here...
  console.log('Redirect', itemId);  
});

$('.bagList a').on('click', e => {
  e.stopPropagation();
  e.preventDefault();
  let itemId = $(e.target).closest('.bagList').data('item-id');
  
  // delete logic here...
  console.log('Delete', itemId);
});
  

.bagList { 
  cursor: pointer;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  @foreach (var item in Model.PickupTemplate.PickupBags.OrderByDescending(x => x.Id)) 
  {
    <tr id="pickupBagRow-@item.Id" data-item-id="@item.Id" class="bagList">
      <td>@item.BagName - @item.BagOrderId</td>
      <td>@item.TotalBillOfLadingWeightPhysical</td>
      <td>@item.TotalBillOfLadingWeight</td>
      <td>@item.TotalBillOfLadingCount</td>
      <td><a href="#"><i class="fa fa-trash fa-2x"></i>Delete</a></td>
    </tr>
  }
</table>

Here's the same logic in plain JS:

document.querySelectorAll('.bagList').forEach(bagList => {
  bagList.addEventListener('click', e => {
    let itemId = e.currentTarget.dataset['item-id'];

    // redirect logic here...
    console.log('Redirect', itemId);
  })
});

document.querySelectorAll('.bagList a').foreach(a => {
  a.addEventListener('click', e => {
    e.stopPropagation();
    e.preventDefault();
    let itemId = $(e.target).closest('.bagList').data('item-id');

    // delete logic here...
    console.log('Delete', itemId);
  });
});