Собственное окно поиска, кнопка х не скрывает

Question

Я делаю свое собственное окно поиска, вот код:

const myInput       = document.querySelector('input')
  ,   btSearchReset = document.querySelector('.header-search-reset')
  ;
  
myInput.addEventListener('keyup',function() {
  if(this.value === ""){
    btSearchReset.classList.remove('reset');
  }
  else {
    btSearchReset.classList.add('reset');
  }
});
  
btSearchReset.addEventListener('click',function() {
    myInput.value = "";
});

input {
  border: 1px solid #000;
}
.header-search input::-ms-clear{display: none;}
.header-search-reset {
  cursor    : pointer;
  opacity   : 0;
  visibility: hidden;
  transition: opacity .2s,visibility .2s;
}
.header-search-reset.reset {
  opacity   : 1;
  visibility: visible;
}

<input type="text" placeholder="Search">

<button type="button" class="header-search-reset">X</button>

И если я наберу что-нибудь и нажму x, содержимое фактически исчезнет. Но кнопка х не скрывает.

Answer 1

Добавить btSearchReset.classList.remove('reset'); для удаления класса "сброс".

const myInput = document.querySelector('input');
      btSearchReset = document.querySelector('.header-search-reset');

    myInput.addEventListener('keyup',function() {
      if(this.value === ""){
        btSearchReset.classList.remove('reset');
      }
      else {
        btSearchReset.classList.add('reset');
      }
    });

    btSearchReset.addEventListener('click',function() {
        myInput.value = "";
         btSearchReset.classList.remove('reset');
    });

Answer 2

remove  btSearchReset.classList.remove('reset') btSearchReset.addEventListener('click',function() 

надеюсь, это поможет