JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<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>

JavaScript

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

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