Link within a bootstrap list-group-item, but popup confirmation before clicking link

I have a ‘bootstrap list group item’. I am trying to create a link inside the link area. The code below works:

// THIS CODE WORKS //

<a href="" class="list-group-item list-group-item-action active text-white rounded-0">

              // --- JUST A BUNCH OF HTML COMES HERE -- //

<i class="fa fa-trash" aria-hidden="true" onclick="window.open('?delete=<?=$x?>','_self');return false;"></i>


</a>

Now what I would like to do is to add a confirmation to this so the user doesn’t delete by mistake.

// WANT TO ADD THIS FEATURE //

  return confirm('Are you sure you want to delete?');

How would I combine these to? When I try they will not execute. I have tried.

// WHAT I TRIED //

function Heya()
{
 return confirm('Are you sure you want to delete?');
}

function Hoo()
{
    window.open('?delete','_self');return false;
}


// AND ON THE PAGE //

<i class="fa fa-trash" aria-hidden="true" onclick="Heya(); Hoo();"></i>

It doesn’t work… And I also need a way to pass on the variable ‘x’ to the script since it will differ..

Thanks a lot for help.

Answer

function checkDelete(x)
{
 if (confirm('Are you sure you want to archive?')) {
   var url = '?delete=' + x;
   window.open(url,'_self');
 }
  return false;
}

<i class="fa fa-trash" aria-hidden="true" onclick="return checkDelete(<?=x?>);"></i>