Components

Remove element

Easily remove elements with just a single click, streamlining your workflow and enhancing user experience.

Default

Basic example

Include the `data-remove-element` attribute in the close button element and set its value to `#id` to specify the element to be removed. Customize the removal animation by incorporating the `removing:` modifier, as illustrated below.

Remove card

With a single click on the close button, this card will be effortlessly removed.

Illustrations

Badge

Below example demonstrates use of `remove-element` in badges.

Badge

Alerts

Below example demonstrates use of `remove-element` in alerts.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a remove element.

Remove card

With a single click on the close button, this card will be effortlessly removed.

Options usage

Using data attribute

In the `data-remove-element-options` attribute, assign an object as its value.

Remove card

With a single click on the close button, this card will be effortlessly removed.

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
removing:variantWhen the removal process starts, it applies a specified class.