I have a filter that searches the text of a html list, I only want to search in specific elements in the list. For example I want to exclude .wp-block-post-excerpt class from the search.
I tried to use :not(.wp-block-post-excerpt) in the selector but didn't do anything.
const input = document.querySelector(
'.post-search-filter .wp-block-search__input'
);
const items = document.querySelector('.post-list').getElementsByTagName('li');
input.addEventListener('keyup', function (ev) {
const text = ev.target.value;
const pat = new RegExp(text, 'i');
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (pat.test(item.innerText)) {
item.classList.remove('hidden');
} else {
console.log(item);
item.classList.add('hidden');
}
}
});<ul class="post-list">
<li class="wp-block-post post-3296 post">
<div>
<div class="wp-block-post-date"><time datetime="2022-05-04T16:00:43-04:00">May 4th, 2022</time></div>
<h2>Newsletter Title</h2>
<div class="wp-block-post-excerpt">
<p class="wp-block-post-excerpt__excerpt">Lorem ipsum dolor sit amet...</p>
<p class="wp-block-post-excerpt__more-text"><a class="wp-block-post-excerpt__more-link" href="https://polaris.test/newsletter-title/">Read More</a></p>
</div>
</li>
</ul>