Estoy tratando de crear una "x" que aparece al final de un cuadro de entrada de texto en el que se puede hacer clic para eliminar el texto que el usuario ha escrito. He visto esto hecho con Angular, pero no puedo resolverlo con HTML y CSS. He estado usando la etiqueta de eliminación e intentando acceder al valor como tal:

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

Gracias.