Nothing changes on a page when i change css “display” property of an element via javascript

Question

I have simle application which is intended to filter list(displays items that matches and hides the rest)

There is function which is triggered by 'input' event on <input> element. It changes the "display" attribute for <li> element. And finally it adds proper attribute value(block or none) to each <li> . However i do not see any changes on a page.

Here is a code:

function filterInput(e) {
   //value from <input> element
   let keyValue = e.target.value;
   //all items from list
   let listOfTasks = document.querySelectorAll('.list-group-item');
   listOfTasks.forEach(function (task) {
      const item = task.firstChild.textContent;
      if(~item.indexOf(keyValue)){
         task.style.display = 'block';
      } else {
         task.style.display = 'none';
      }
   });
}

Here is screenshot of elements before event:

Here is screenshot of elements after event:

And on the page nothing changes:

Answer 1

My best guess is that CSS for ".list-group-item" has "display: block !important", which takes priority over inline styling. Because the inline styling is assigned, but doesn't take effect...