Hiding Elements based on user role and reflowing content.

Hi.
I have a few different user Roles and I want to hide certain elements on the homepage based on the Role.

Have a look at the Home page. When I log in as a certain user, the elements are hidden, but the spaces are left where they were, making the layout have gaps all over where the elements have been removed.

The following is what I have tried, but I am not sure if I am targeting the correct elements.

JavaScript:
document.addEventListener(“DOMContentLoaded”, function () {
console.log(“Custom.js is running”);
console.log(“User Data:”, userData);

const userRole = userData.role.toLowerCase(); // Convert role to lowercase for comparison
console.log(“User Role:”, userRole);

if (userRole === “mrpi_user”) {
console.log(“Role matches MRPI User. Waiting for elements to load…”);

const interval = setInterval(function () {
// Specify the elements to remove
const elementsToRemove = [
document.getElementById(“Wholesaler_Element_Homepage”),
document.getElementById(“Products_Element_Homepage”),
];

let allElementsFound = true;

// Loop through the elements to remove
elementsToRemove.forEach(function (element) {
if (element) {
console.log(“Removing element:”, element);
element.remove(); // Remove the specific element
} else {
console.log(“Element not found yet.”);
allElementsFound = false; // Keep checking if any element is not found
}
});

// Stop checking when all elements are removed
if (allElementsFound) {
clearInterval(interval);
}
}, 100); // Check every 100ms
} else {
console.log(“Role does not match. Skipping element removal.”);
}
});

CSS:

#av_section_2 {
display: flex; /* Enable flexbox layout */
flex-wrap: wrap; /* Allow items to wrap to the next row if necessary */
justify-content: flex-start; /* Align items to the left */
padding: 0; /* Remove internal padding */
margin: 0; /* Remove external margins */
height: auto; /* Adjust height dynamically */
gap: 10px; /* Optional: Add spacing between items */
}

#av_section_2 > .flex_column {
flex: 1 1 auto; /* Allow items to grow and shrink dynamically */
margin: 0; /* Remove margin between elements */
padding: 0; /* Remove internal padding */
}

HTML:
<div id=”Wholesaler_Element_Homepage”></div>
<div id=”Products_Element_Homepage”></div>