JS injects dynamic CSS based on config

js/minimalprofile.js

@@ -1,5 +1,5 @@
 /**
- * Minimal Profile - Show fields based on config
+ * Minimal Profile - Hide specific fields based on config
  */
 (function() {
 	'use strict';
@@ -19,20 +19,25 @@
 		'location': '#account-property-location'
 	};
 
-	function showFields(hiddenFields) {
-		var allFields = Object.keys(fieldSelectors);
-		allFields.forEach(function(field) {
-			if (!hiddenFields.includes(field)) {
-				var selector = fieldSelectors[field];
-				var el = document.querySelector(selector);
-				if (el) {
-					var box = el.closest('.personal-settings-setting-box');
-					if (box) {
-						box.style.display = '';
-					}
-				}
+	function hideFields(hiddenFields) {
+		if (!hiddenFields || hiddenFields.length === 0) {
+			return;
+		}
+		
+		var css = '';
+		hiddenFields.forEach(function(field) {
+			var selector = fieldSelectors[field];
+			if (selector) {
+				css += '.personal-settings-setting-box:has(' + selector + ') { display: none !important; } ';
 			}
 		});
+		
+		if (css) {
+			var style = document.createElement('style');
+			style.id = 'minimalprofile-dynamic';
+			style.textContent = css;
+			document.head.appendChild(style);
+		}
 	}
 
 	function init() {
@@ -41,7 +46,7 @@
 			if (req.status === 200) {
 				try {
 					var data = JSON.parse(req.responseText);
-					showFields(data.hiddenFields || []);
+					hideFields(data.hiddenFields || []);
 				} catch (e) {}
 			}
 		};