javascript - 自带搜索框，x按钮不隐藏

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，内容实际上就会消失。但按钮 x 不会隐藏。

Answer 1

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

希望对你有帮助