Tailwind CSS Remove Element

Dismiss any content.

Installation

To get started, install Remove Element plugin via npm, else you can skip this step if you are already using Preline UI as a package.

Terminal

npm i @preline/remove-element

Example

Remove card with a dismissable button.

Remove element card

No new emails

Looks like you haven't received any emails.

<div id="dismiss-card" class="flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
  <div class="inline-flex justify-between items-center bg-gray-100 border-b border-gray-200 rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-neutral-800 dark:border-neutral-700">
    <h3 class="font-semibold text-gray-800 dark:text-white">
      Remove element card
    </h3>
    <button type="button" class="inline-flex justify-center items-center size-4 rounded-lg text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white text-sm dark:focus:ring-neutral-700 dark:focus:ring-offset-gray-800" aria-label="Close" data-hs-remove-element="#dismiss-card">
      <span class="sr-only">Close</span>
      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </div>
  <div class="text-center p-4 md:py-10 md:px-5">
    <svg class="w-20 h-auto mx-auto" width="51" height="49" viewBox="0 0 51 49" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M30.1044 1.13135L49.5 21L32.0892 31L26.2611 25.0569L18.5223 29.2171L4 15L27.6443 0.813437C28.4389 0.336639 29.4571 0.468208 30.1044 1.13135Z" class="fill-gray-400 dark:fill-white" fill="currentColor"></path>
      <path d="M5.34439 15.5099L18.344 28.6964C18.6636 29.0205 19.1616 29.088 19.5558 28.8606L25.8654 25.2212C26.2677 24.9892 26.7768 25.0647 27.0945 25.4034L31.8521 30.4769C32.1787 30.8252 32.706 30.894 33.1111 30.6412L48.2909 21.1655C48.9922 20.7277 49.8917 21.2817 49.8163 22.105L47.5402 46.9576C47.4882 47.5254 46.9727 47.9349 46.4078 47.857L1.95761 41.7284C1.42357 41.6548 1.04401 41.1711 1.0995 40.6349L3.63757 16.1091C3.72459 15.2682 4.75092 14.908 5.34439 15.5099Z" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"></path>
      <path d="M5 38L15 31" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"></path>
      <path d="M36 34L43 43" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"></path>
    </svg>
    <h3 class="mt-5 font-bold text-gray-800 dark:text-white">
      No new emails
    </h3>
    <p class="text-sm text-gray-500 dark:text-neutral-500">
      Looks like you haven't received any emails.
    </p>
  </div>
</div>

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

<div id="dismiss-unstyled" class="inline-flex justify-between items-center w-full">
  <h3>
    Remove element card
  </h3>
  <button type="button" class="inline-flex justify-center items-center size-4" data-hs-remove-element="#dismiss-unstyled">
    <span class="sr-only">Close</span>
    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </button>
</div>

JavaScript behavior

Data Options

Name	Description	Options	Default value
`data-hs-remove-element`	The element to be removed. This must be a valid selector. Should be added to the button (trigger).	—	`null`
`data-hs-remove-element-options`	Options that can be added via the data attribute. Should be added to the button (trigger).	—	—
`:removeTargetAnimationClass`	Some valid CSS class.	string	`hs-removing`

Methods

The HSRemoveElement object is contained within the global window object

Method	Description
Public methods
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSRemoveElement.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Destroy instance.

const { element } = HSRemoveElement.getInstance('#remove-element', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components