Ask AI
Skip to main content

Remove classes

Function: Remove classes​

This action allows you to dynamically remove specific visual styles (CSS classes) from one or more UI elements on your application pages. This is useful for changing the appearance or behavior of elements based on user interactions or data conditions, making your application more interactive and responsive.

Input​

  • Elements (List of values): A list of UI elements from which you want to remove classes. Each item in this list is a collection of information about a specific element:
    • Element (UI element): The specific UI component (like a button, text box, or panel) you want to modify.
    • Conditional (True/False): An optional condition. If set to True, the classes will be removed from this element. If False or left empty, the classes will not be removed from this specific element, even if it's in the list.
  • Classes (List of values): A list of class names (text) that you want to remove from the selected UI elements. Each item in this list is:
    • Class (A piece of text): The exact name of a CSS class to be removed.

Execution Flow​

Real-Life Examples​

Here are some examples of how you can use the "Remove classes" action in your application:

Example 1: Resetting a form field's error state​

Imagine you have a form where an input field turns red if the user enters invalid data. Once the user corrects the input, you want to remove the red error styling.

  • Inputs:
    • Elements:
      • Element: [Input Field: Email Address]
      • Conditional: True (or a condition like Email_Input.isValid = True)
    • Classes:
      • Class: "error-border"
      • Class: "text-danger"
  • Result: The Email Address input field will no longer have the error-border and text-danger styles, returning to its normal appearance.

Example 2: Hiding a temporary notification​

You have a "Success" message that appears after a user saves data. After a few seconds, you want this message to disappear. You can achieve this by removing a class that makes it visible.

  • Inputs:
    • Elements:
      • Element: [Text Element: Success Message]
      • Conditional: True
    • Classes:
      • Class: "show-notification"
  • Result: The Success Message text element will have the show-notification class removed, causing it to become hidden (assuming the show-notification class controls its visibility).

Example 3: Changing the active state of a navigation item​

In a tabbed interface, when a user clicks on a new tab, you want to remove the "active" styling from the previously selected tab and apply it to the new one (this example only covers removing).

  • Inputs:
    • Elements:
      • Element: [Button: Previous Tab]
      • Conditional: True
    • Classes:
      • Class: "active-tab"
  • Result: The Previous Tab button will lose its active-tab styling, indicating it is no longer the selected tab. (You would typically follow this with an "Add classes" action to style the newly selected tab).