Hide 'Clear All' Filter if no filters are selected – Attributes V2

Attributes
,
1

Description

How do I hide the ‘Clear All’ filter button if no filters are selected. Then show it after a user has selected a filter?

Site URL

See show filters button halfway down the page
..

2

Hey @hello41!

We can help you hide the ‘Clear All’ filter button when no filters are selected and show it only when filters become active. This requires a custom JavaScript solution since our Attributes v2 doesn’t have this as a built-in feature.

The ‘Clear All’ button is always visible by default, but we can make it respond to your filter state changes with some custom code.

This would need a JavaScript approach that:

  • Checks if any filters are currently active
  • Shows the Clear All button only when filters are in use
  • Hides it again when all filters are cleared

The solution would monitor all your filter elements (checkboxes, radios, dropdowns, text inputs) and update the button visibility in real-time.

If you’d like to implement this on your site, @Support-Luis or @Support-Pedro can help you with the specific code solution tailored to your setup.

3

Hey @hello41!

I made this script, it checks your filter inputs to see if any are active, and shows or hides the “Clear” button both on filter changes and after the list is re-rendered.

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {

      const [listInstance] = listInstances;

      const clearBtn = document.querySelector('[fs-list-element="clear"]');
      const filtersForm = document.querySelector('[fs-list-element="filters"]');

      const isFilterActive = () =>
        Array.from(filtersForm.querySelectorAll('input, select, textarea'))
          .some(ctrl =>
            (ctrl.type === 'checkbox' || ctrl.type === 'radio')
              ? ctrl.checked
              : ctrl.value.trim() !== ''
          );

      const toggleClear = () => {
        if (clearBtn) {
          clearBtn.style.display = isFilterActive() ? 'block' : 'none';
        }
      };

      toggleClear();
      filtersForm.addEventListener('change', toggleClear);

      listInstance.addHook('afterRender', items => {
        toggleClear();
        return items;
      });
    },
  ]);
</script>

Let me know if it works for you!