I am trying to create an "x" that appears at the end of a text input box which can be clicked to delete the text that the user has typed. I have seen this done with Angular, but I can't figure it out with HTML and CSS. I have been using the remove tag and attempting to access the value as such:

<button onclick="myFunction()"> X </button>
<p id="test"> </p> 
<script>
   let theText= input.value;
   function myFunction() {
       return input.value.remove();
   }
</script>

Thank you.