diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index 4a579ced5d..3ee47c965c 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/src/components/filterdialog/filterdialog.js
@@ -61,11 +61,7 @@ function renderFilters(context, result, query) {
 
 function renderResetButton(context, query) {
     const elem = context.querySelector('.btnResetAllFilters');
-    if (getFilterStatus(query)) {
-        elem.classList.remove('hide');
-        return;
-    }
-    elem.classList.add('hide');
+    elem.classList.toggle('hide', !getFilterStatus(query));
 }
 
 function loadDynamicFilters(context, apiClient, userId, itemQuery) {
@@ -127,12 +123,7 @@ function triggerChange(instance) {
     stopMultiSelect();
     Events.trigger(instance, 'filterchange');
     // show or hide reset filter button on any filter change
-    const elem = document.querySelector('.btnResetAllFilters');
-    if (getFilterStatus(instance.options.query)) {
-        elem.classList.remove('hide');
-        return;
-    }
-    elem.classList.add('hide');
+    renderResetButton(document.querySelector('.filterDialog'), instance.options.query);
 }
 
 function setVisibility(context, options) {
diff --git a/src/components/filterdialog/filterdialog.template.html b/src/components/filterdialog/filterdialog.template.html
index 0f97a2bd1a..b0e2086a39 100644
--- a/src/components/filterdialog/filterdialog.template.html
+++ b/src/components/filterdialog/filterdialog.template.html
@@ -141,7 +141,7 @@
         </div>
     </div>
 
-    <button is="emby-button" type="button" class="btnResetAllFilters hide emby-button raised block">
+    <button is="emby-button" type="button" class="btnResetAllFilters hide raised block">
         <span class="listItemIcon listItemIcon-transparent material-icons delete" aria-hidden="true"></span>
         <span>${ResetAllFilters}</span>
     </button>