Jeremy Mullis in reply to:
Hide heading if empty results

#276628

Here is a JS solution. This is a little crude, but it works. Obviously this would need run after the DOM is ready.

// test if there is a searchandfilter form on the page
if (document.querySelector(‘.searchandfilter’)) {

// query all the ul elements within our filters
const filters = document.querySelectorAll(
‘.searchandfilter > ul > li > ul’
);

// hide the parent (li) element for any that are empty
filters.forEach((filter) => {
if (filter.children.length === 0) {
filter.parentElement.style.display = ‘none’;
}
});
}

Add New Note to this Reply

Jeremy Mullis in reply to:
Hide heading if empty results

#276627

The following css solution does not YET work (July 2022), but it should be viable once browsers begin implementing css Selectors Level 4. It requires the :has pseudo class, and also requires that the :empty pseudo class ignores whitespace.

`css
.searchandfilter>ul>li:has(>ul:empty) {
display: none;
}
`

https://caniuse.com/css-has
https://caniuse.com/mdn-css_selectors_empty_matches_whitespace

Add New Note to this Reply

[Author]

Posts