VoxelKit
← Back to library
Search & filters Free

Clear-all filters button

A small button that resets every native input inside a search/filter form in one click.

Price ×2+ beds ×Clear all
document.querySelectorAll('[data-clear-filters]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var form = btn.closest('form');
    if (!form) return;
    form.reset();
    form.querySelectorAll('input, select, textarea').forEach(function (el) {
      el.dispatchEvent(new Event('change', { bubbles: true }));
      el.dispatchEvent(new Event('input', { bubbles: true }));
    });
  });
});

Add a button with the data-clear-filters attribute inside your filter form. On click it resets the form’s native inputs and fires change/input events so listeners can react.

Notes

  • This resets standard form controls only. Voxel’s custom filter widgets may need their own re-query trigger — the dispatched events are there to nudge those listeners, but verify on your setup.
  • Place the button inside the same <form> as the filters, or adjust closest('form') to match your container.
  • Add it via an Elementor HTML widget or a script include so it runs after the form renders.