Ask AI
Skip to main content

Remove classes

Function: Remove classes​

This function helps you manage the visual appearance and behavior of your user interface (UI) elements by removing specific styling or functional classes. You can use it to dynamically change how elements look or act, for instance, to hide a message, change a color, or enable a feature by taking away a class that controls those aspects.

Input​

  • Elements (List of Objects): This is a list of the specific UI elements you want to modify. For each element in this list, you can specify:
    • Element (UI Element): The actual UI component (like a button, text box, or panel) from which you want to remove classes.
    • Conditional (True/False): An optional condition. If this condition evaluates to True, the classes will be removed from this specific element. If it's False or left empty, the classes will not be removed from this element.
  • Classes (List of Text): This is a list of the class names you wish to remove. For each class in the list, you specify:
    • Class (Text): The exact name of the CSS class you want to remove (e.g., "hidden", "active", "error-message").

Output​

No direct output is returned by this function. It modifies the specified UI elements directly within your application.

Execution Flow​

Real-Life Examples​

Example 1: Hiding a "Loading" Indicator​

  • Scenario: After data has successfully loaded on a page, you want to hide a "Loading..." message or spinner that was previously displayed.
  • Inputs:
    • Elements:
      • Element: The "Loading Spinner" UI element.
      • Conditional: (Leave empty, or set to true if you have a specific condition like DataLoaded = true)
    • Classes:
      • Class: "is-loading" (assuming this class makes the spinner visible)
  • Result: The "Loading Spinner" UI element will no longer have the "is-loading" class, causing it to become hidden from the user's view.

Example 2: Resetting a Form Field's Error State​

  • Scenario: A user corrects an invalid input in a form field (e.g., enters a valid email address), and you want to remove the red border and any associated error message styling.
  • Inputs:
    • Elements:
      • Element: The "Email Input Field" UI element.
      • Conditional: (Leave empty, or set to true if EmailIsValid = true)
    • Classes:
      • Class: "error-border"
      • Class: "invalid-input"
  • Result: The "Email Input Field" UI element will have its "error-border" and "invalid-input" classes removed, visually indicating that the input is now valid.

Example 3: Enabling a "Submit" Button for Admin Users​

  • Scenario: A "Submit" button is initially disabled (it has a "disabled" class) to prevent unauthorized submissions. You want to enable it (remove the "disabled" class) only if the current user has "Admin" privileges.
  • Inputs:
    • Elements:
      • Element: The "Submit Order" Button UI element.
      • Conditional: Current User Role IS "Admin" (This condition would be set up using your platform's logic builder to check the logged-in user's role)
    • Classes:
      • Class: "disabled" (assuming this class makes the button unclickable and visually greyed out)
  • Result: If the current user's role is "Admin", the "Submit Order" button will have the "disabled" class removed, making it active and clickable. If the user is not an "Admin", the condition will be false, and the "disabled" class will remain on the button.