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.

                      
                        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.

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