components

Tailwind CSS Remove element

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

Class Name
Type
Description
removing:ModifierWhen the removal process starts, it applies a specified class.

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.

Below example demonstrates use of remove-element in badges.

Below example demonstrates use of remove-element in alerts.

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

Within this object, define the removeTargetAnimationClass key as a Tailwind CSS class, which will be applied during the removal process.By default, this value is derived from the modifier class removing:, but it can also be specified using this data attribute option.

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-remove-elementThe element to be removed. This must be a valid selector.-null
data-remove-element-optionsOption that can be added via the data attribute.--
:removeTargetAnimationClassSome valid TailwindCSS class.stringremoving