Javascript поиск строки в выбранных элементах и ​​скрыть HTML-тег, который содержит эту строку

Question

Я написал простой код javascript, чтобы найти, существует ли строка в innerHtml в выбранных элементах, теперь я хотел бы скрыть элемент, содержащий эту строку, но я не уверен, как получить идентификатор тега или что-то, чтобы скрыть указанный элемент,Вот мой код.

 function hideTemplateOption(collToHide, hideText) {
    let collection = document.getElementsByClassName("product_tr_cus");
    if(collectionContains(collection,"test")) {
        console.log("contains");
    } else {
        console.log("nope");
    }
  }
  function collectionContains(collection, searchText) {
    for (var i = 0; i < collection.length; i++) {
        if( collection[i].innerText.toLowerCase().indexOf(searchText) > -1 ) {
            return true;
        }
    }
    return false;
  }
  hideTemplateOption();

Answer 1

Вы можете сделать collection[i].style.display = 'none'; или лучше установить его условно:

function toggle(collection, searchText) {
  var found = false;
  for (var i = 0; i < collection.length; i++) {
      var item_found = collection[i].innerText.toLowerCase().match(searchText);
      collection[i].style.display = item_found ? '' : 'none';
      if (item_found) {
          found = true;
      }
  }
  return found;
}

let collection = document.getElementsByClassName("product_tr_cus");
document.querySelector('input').addEventListener('keyup', function(event) {
   toggle(collection, event.target.value);
});

<input/>
<ul>
  <li class="product_tr_cus">Foo</li>
  <li class="product_tr_cus">Bar</li>
  <li class="product_tr_cus">Baz</li>
  <li class="product_tr_cus">Quux</li>
</ul>

, если вы хотите противоположное, он скроет узел, содержащий строку, затем используйте:

collection[i].style.display = item_found ? '' : 'none';

и вам, вероятно, понадобится лучшеимя для функции.