Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .reset-button{
      /*стилизуешь как тебе надо*/
      color: white;
      background-color: red;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text">
    <span class="reset-button">x</span>
  </div>
  <script>
function updateResetButton(e){
  var resetButton = e.target.parentNode.querySelector(".reset-button");
  resetButton.style.visibility = e.target.value ? "visible" : "hidden";
}

function clearInput(e){
  e.target.parentNode.querySelector("input").value = "";
  e.target.style.visibility = "hidden";
}

function connectResetButton(wrapper){
  var resetButton = wrapper.querySelector(".reset-button");
  var input = wrapper.querySelector("input");
  resetButton.addEventListener("click", clearInput);
  input.addEventListener("input", updateResetButton);
  resetButton.style.visibility = input.value ? "visible" : "hidden";
}

var wrapper = document.querySelector(".input-wrapper");
connectResetButton(wrapper);


  </script>
</body>
</html>