Tailwind CSS Remove element

Class Name	Type	Description
removing:	Modifier	When 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.

<div class="card removing:opacity-0 removing:translate-x-5 bg-primary/20 text-primary max-w-sm transition duration-300 ease-in-out" id="card-dismiss" >
  <div class="card-header text-base-content/80 flex justify-between items-center">
    <span class="card-title text-primary">Remove card</span>
    <div class="card-actions">
      <button class="leading-none" data-remove-element="#card-dismiss">
        <span class="icon-[tabler--x] size-5 text-primary"></span>
      </button>
    </div>
  </div>
  <div class="card-body">
    <p>With a single click on the close button, this card will be effortlessly removed.</p>
  </div>
</div>

Illustrations

Badge

Below example demonstrates use of remove-element in badges.

<span class="badge badge-soft badge-lg badge-primary removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-chip" >
  Badge
  <button class="icon-[tabler--circle-x-filled] btn btn-primary size-5 min-h-0 px-0 opacity-70" data-remove-element="#badge-chip" ></button>
</span>

Alerts

Below example demonstrates use of remove-element in alerts.

<div class="alert alert-soft alert-primary removing:translate-x-5 removing:opacity-0 flex items-center gap-4 transition duration-300 ease-in-out" role="alert" id="dismiss-alert" >
  Dive into our platform to discover exciting new features and updates.
  <button class="ms-auto leading-none" data-remove-element="#dismiss-alert">
    <span class="icon-[tabler--x] size-5"></span>
  </button>
</div>

Options usage

Using data attribute

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.

<div class="card removing:opacity-0 bg-primary/20 text-primary max-w-sm transition duration-300 ease-in-out" id="card-dismiss-2" >
  <div class="card-header text-base-content/80 flex justify-between items-center">
    <span class="card-title text-primary">Remove card</span>
    <div class="card-actions">
      <button class="leading-none" data-remove-element="#card-dismiss-2" data-remove-element-options='{"removeTargetAnimationClass":"translate-x-5"}' >
        <span class="icon-[tabler--x] size-5 text-primary"></span>
      </button>
    </div>
  </div>
  <div class="card-body">
    <p>With a single click on the close button, this card will be effortlessly removed.</p>
  </div>
</div>

JavaScript behavior

Options

FlyonUI is powered by Preline’s unstyled, headless Tailwind plugins to deliver accessible and responsive user interfaces.

PARAMETERS	DESCRIPTION	OPTIONS	DEFAULT VALUE
`data-remove-element`	The element to be removed. This must be a valid selector.	`-`	`null`
`data-remove-element-options`	Option that can be added via the data attribute.	`-`	`-`
`:removeTargetAnimationClass`	Some valid TailwindCSS class.	string	`removing`

FlyonUI

Tailwind CSS Remove element

Default

Basic example