JS onclick button remove it from DOM not working properly when it has a sub-element attached

I have the following html structure:

<div class="input-group mt-3 ms-3" style="max-width: 300px">
  <input type="text" class="form-control form-control-sm" name="search" placeholder="Type something"/>
  <button type="button" class="btn btn-secondary btn-sm btn-clear-search-input" style="width: 50px">
    <i class="fas fa-times"></i>
  </button>
</div>

And I’d like to remove the button after it has been pressed. The problem is that if the user presses right in the middle of the button (where the <i> is), it only removes the
<i>.

const btnClearSearchInput = document.getElementsByClassName('btn-clear-search-input')[0];
btnClearSearchInput.addEventListener('click', clearSearch);

function clearSearch(event)
{
  event.target.remove();
}

By performing console.log() on event.target and event.srcElement I can see that the the value is related with <i>.

The following JSFiddle illustrates the problem.

enter image description here