如何添加/删除隐藏类

Question

我有一个锚标签，我想从中删除/添加一个隐藏的类，但由于某种原因，我的简单 if else 语句不起作用并且“重置”保持显示。我想要它，以便当输入中有文本时它会显示，但当它为空时它不会显示。我一直无法让它工作。如果需要，我可以提供更多

const search = document.querySelector('.frm-control');

const reset = document.querySelector('.reset')

if (search != "") {

  reset.classList.remove('hidden');

} else {

  reset.classList.add('hidden');

}

console.log(reset)

console.log(search)

reset.addEventListener('click', function (e) {

  // x();

  // e.preventDefault();

  // const row = document.querySelectorAll('.thumb-display');

  // row.classList.add('hidden');

  // search.innerHTML = "";

})

起初我想将条件添加到我的事件侦听器中，但这也不起作用

HTML：https : //codepen.io/ahassan77/pen/QWWBKxo

Answer 1

您可以在元素的输入事件处理函数中设置类。请注意：要从输入元素重置文本，您必须使用value属性而不是innerHTML.尝试以下方法：const search = document.querySelector('.frm-control');const reset = document.querySelector('.reset')search.addEventListener('input', function (e) {&nbsp; if (this.value.trim() != "") {&nbsp; &nbsp; reset.classList.remove('hidden');&nbsp; } else {&nbsp; &nbsp; reset.classList.add('hidden');&nbsp; }});reset.addEventListener('click', function (e) {&nbsp; // x();&nbsp; // e.preventDefault();&nbsp; // const row = document.querySelectorAll('.thumb-display');&nbsp; search.value = "";&nbsp; reset.classList.add('hidden');});.hidden {&nbsp; visibility: hidden;}<form class="frm-filter">&nbsp; <div class="frm-group">&nbsp; &nbsp; <a class="reset" href="#">Reset</a>&nbsp; &nbsp; <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />&nbsp; </div></form>