diff --git a/administrator/components/com_config/src/Field/FiltersField.php b/administrator/components/com_config/src/Field/FiltersField.php
index b9993ee267181..328300440cd5a 100644
--- a/administrator/components/com_config/src/Field/FiltersField.php
+++ b/administrator/components/com_config/src/Field/FiltersField.php
@@ -13,7 +13,6 @@
 
 use Joomla\CMS\Factory;
 use Joomla\CMS\Form\FormField;
-use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Layout\LayoutHelper;
 
@@ -43,47 +42,11 @@ class FiltersField extends FormField
 	 */
 	protected function getInput()
 	{
-		// Load Framework
-		HTMLHelper::_('jquery.framework');
-
 		// Add translation string for notification
 		Text::script('COM_CONFIG_TEXT_FILTERS_NOTE');
 
 		// Add Javascript
-		$doc = Factory::getDocument();
-		$doc->addScriptDeclaration('
-			jQuery( document ).ready(function( $ ) {
-				$("#filter-config select").change(function() {
-					var currentFilter = $(this).children("option:selected").val();
-
-					if($(this).children("option:selected").val() === "NONE") {
-						var child = $("#filter-config select[data-parent=" + $(this).attr("data-id") + "]");
-
-						while(child.length !== 0) {
-							if(child.children("option:selected").val() !== "NONE") {
-								alert(Joomla.Text._("COM_CONFIG_TEXT_FILTERS_NOTE"));
-								break;
-							}
-
-							child = $("#filter-config select[data-parent=" + child.attr("data-id") + "]");
-						}
-
-						return;
-					}
-
-					var parent = $("#filter-config select[data-id=" + $(this).attr("data-parent") + "]");
-
-					while(parent.length !== 0) {
-						if(parent.children("option:selected").val() === "NONE") {
-							alert(Joomla.Text._("COM_CONFIG_TEXT_FILTERS_NOTE"));
-							break;
-						}
-
-						parent = $("#filter-config select[data-id=" + parent.attr("data-parent") + "]")
-					}
-				});
-			});'
-		);
+		Factory::getDocument()->getWebAssetManager()->useScript('com_config.filters');
 
 		// Get the available user groups.
 		$groups = $this->getUserGroups();
diff --git a/build/media_source/com_config/joomla.asset.json b/build/media_source/com_config/joomla.asset.json
index 03a98425f2b16..71fb94e5a2901 100644
--- a/build/media_source/com_config/joomla.asset.json
+++ b/build/media_source/com_config/joomla.asset.json
@@ -73,6 +73,29 @@
       "attributes": {
         "type": "module"
       }
+    },
+    {
+      "name": "com_config.filters.es5",
+      "type": "script",
+      "uri": "com_config/config-filters-es5.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "nomodule": true,
+        "defer": true
+      }
+    },
+    {
+      "name": "com_config.filters",
+      "type": "script",
+      "uri": "com_config/config-filters.min.js",
+      "dependencies": [
+        "com_config.filters.es5"
+      ],
+      "attributes": {
+        "type": "module"
+      }
     }
   ]
 }
diff --git a/build/media_source/com_config/js/config-filters.es6.js b/build/media_source/com_config/js/config-filters.es6.js
new file mode 100644
index 0000000000000..c7f10994bff88
--- /dev/null
+++ b/build/media_source/com_config/js/config-filters.es6.js
@@ -0,0 +1,30 @@
+/**
+ * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+const recursiveApplyChanges = (id) => {
+  const childs = [].slice.call(document.querySelectorAll(`#filter-config select[data-parent="${id}"]`));
+  childs.map((child) => {
+    recursiveApplyChanges(child.dataset.id);
+    child.value = 'NONE';
+    return child;
+  });
+};
+
+const applyChanges = (event) => {
+  const currentElement = event.currentTarget;
+  const currentFilter = currentElement.options[currentElement.selectedIndex].value;
+
+  if (currentFilter === 'NONE') {
+    const childs = [].slice.call(document.querySelectorAll(`#filter-config select[data-parent="${currentElement.dataset.id}"]`));
+    if (childs.length && window.confirm(Joomla.Text._('COM_CONFIG_TEXT_FILTERS_NOTE'))) {
+      childs.map((child) => {
+        recursiveApplyChanges(child.dataset.id);
+        child.value = 'NONE';
+        return child;
+      });
+    }
+  }
+};
+
+[].slice.call(document.querySelectorAll('#filter-config select')).map((select) => select.addEventListener('change', applyChanges));