Remove Mode
Dismiss the element with a smooth transition, ensuring it is removed from the DOM.

Jane Perez
wants to join chat
1 day ago
Design Team
<div class="card" id="join_request">
<div class="card-body flex items-center justify-between py-5 gap-10">
<div class="flex items-center gap-2.5">
<div class="relative shrink-0">
<img alt="" class="rounded-full size-8" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-14.png"/>
<span class="size-1.5 badge badge-circle bg-success absolute top-7 end-0.5 ring-1 ring-light transform -translate-y-1/2">
</span>
</div>
<div class="flex flex-col">
<div class="text-2sm mb-px">
<a class="hover:text-primary-active font-semibold text-gray-900" href="#">
Jane Perez
</a>
<span class="text-gray-600">
wants to join chat
</span>
</div>
<span class="flex items-center text-2xs font-medium text-gray-500">
1 day ago
<span class="badge badge-circle bg-gray-500 size-1 mx-1.5">
</span>
Design Team
</span>
</div>
</div>
<div class="flex gap-2.5">
<button class="btn btn-light btn-xs" data-dismiss="#join_request">
Decline
</button>
<button class="btn btn-dark btn-xs">
Accept
</button>
</div>
</div>
</div>
Hide Mode
Dismiss the element with a smooth transition, ensuring it is hidden with
.hidden
Tailwind CSS Class.
Apr
12
Event Invitation
9:00 PM - 10:00 PM



+3
<div class="flex flex-col gap-3" id="event_invitation">
<div class="card">
<div class="card-body p-5">
<div class="flex items-center justify-between flex-wrap gap-7.5">
<div class="flex items-center gap-2.5">
<div class="border border-brand-clarity rounded-lg">
<div class="flex items-center justify-center border-b border-b-brand-clarity bg-brand-light rounded-t-lg">
<span class="text-3xs text-brand fw-medium p-1.5">
Apr
</span>
</div>
<div class="flex items-center justify-center size-9">
<span class="fw-semibold text-gray-900 text-md tracking-tight">
12
</span>
</div>
</div>
<div class="flex flex-col gap-1.5">
<a class="hover:text-primary-active font-medium text-gray-700 text-xs" href="#">
Event Invitation
</a>
<span class="font-medium text-gray-600 text-2xs">
9:00 PM - 10:00 PM
</span>
</div>
</div>
<div class="flex -space-x-2">
<div class="flex">
<img class="hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light size-6" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-4.png"/>
</div>
<div class="flex">
<img class="hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light size-6" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-1.png"/>
</div>
<div class="flex">
<img class="hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light size-6" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-2.png"/>
</div>
<div class="flex">
<span class="hover:z-5 relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs size-6 text-success-inverse ring-success-light bg-success">
+3
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex item-center justify-end gap-2.5">
<button class="btn btn-light btn-sm" data-dismiss="#event_invitation" data-dismiss-mode="hide">
Decline
</button>
<button class="btn btn-dark btn-sm">
Accept
</button>
</div>
</div>
<button class="btn btn-primary hidden" id="dismiss_restore_btn">
Show back
</button>
class KTDismissPage {
static _handleDemo() {
const btnEl = document.querySelector('#dismiss_restore_btn');
const dismissEl = document.querySelector('[data-dismiss="#event_invitation"]');
const dismiss = KTDismiss.getInstance(dismissEl);
dismiss.on('dismiss', () => {
btnEl.classList.remove('hidden');
});
btnEl.addEventListener('click', () => {
dismiss.getTargetElement().classList.remove('hidden');
btnEl.classList.add('hidden');
});
}
static init() {
this._handleDemo();
}
}
KTDom.ready(() => {
KTDismissPage.init();
});
Source Code
The following source file manages the JavaScript behavior of the Tailwind CSS Dismiss component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/js/core.bundle.js
bundle,
making it available globally across all pages.
File | Description |
---|---|
src/core/components/dismiss/dismiss.ts
|
The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Dismiss component. |
HTML Markup
The following markup outlines the core structure of the Tailwind CSS Dismiss component.
<div id="my_dismisslable">
<p>
Dismissable content goes here
</p>
<button class="btn btn-primary" data-dismiss="#my_dismisslable" data-dismiss-mode="hide" id="my_dismisser">
Dismiss
</button>
</div>
Data Attribute Initialization
Auto-initialize all KTDismiss instances on page load by adding the
data-dismiss="#element_id"
attribute to your dismiss element.
This triggers on the fly initialization by the KTDismiss JavaScript component.
<div id="my_dismisslable">
<p>
Dismissable content goes here
</p>
<button class="btn btn-primary" data-dismiss="#my_dismisslable" data-dismiss-mode="hide" id="my_dismisser">
Dismiss
</button>
</div>
These attributes allow you to set options for the KTDismiss component during initialization.
The values you provide as strings are automatically converted to the appropriate
KTDismiss Options
.
HTML Attribute | Type | Default | Description |
---|---|---|---|
data-dismiss
|
string
|
- |
Used to auto-initialize KTDismiss instances on page load and provides a string value
serving as an ID selector,
"#content_id"
for a collapsible element.
Alternatively, you can remove it and perform initialization using JavaScript.
|
data-dismiss-hidden-class
|
string
|
"hidden"
|
Tailwind CSS class to use for the hidden state of the dismissable elements. |
data-dismiss-interrupt
|
boolean
|
true
|
Prevents event propagation when the dismiss element is clicked. |
data-dismiss-mode
|
enum
"remove" | "hide"
|
"remove"
|
By using
"hide"
mode, you can hide dismissed elements within the DOM structure,
preserving their state for potential re-display later.
This differs from the default behavior
"remove"
, which permanently removes them from the DOM.
|
JavaScript Initialization
To initialize a new dismiss component, pass the corresponding DOM element and configuration options to the KTDismiss class constructor.
// Dismisser element
const dismisserEl = document.querySelector('#my_dismisser');
// Configuration options(optional)
const options = {
mode: 'active',
target: '#my_dismissable'
};
// Initialize object
const dismisser = new KTDismiss(dismisserEl, options);
<div id="my_dismisslable">
<p>
Dismissable content goes here
</p>
<button class="btn btn-primary" id="my_dismisser">
Dismiss
</button>
</div>
To initialize the dismiss with JavaScript, use the
data-dismiss="false"
attribute instead.
This prevents automatic initialization on page load.
Options
This table outlines the configuration options for initialization of Tailwind CSS Dismiss instances, using the KTDismiss JavaScript component.
Option | Type | Default | Description |
---|---|---|---|
target
|
string | - |
An ID selector of a dismissable element. Example:
"#my_dismissable"
.
|
mode
|
enum
"remove" | "hide"
|
"remove"
|
By using
"hide"
mode, you can hide dismissed elements within the DOM structure,
preserving their state for potential re-display later.
This differs from the default behavior
"remove"
, which permanently removes them from the DOM.
|
data-dismiss-interrupt
|
boolean
|
true
|
Prevents event propagation when the dismiss element is clicked. |
hiddenClass
|
string
|
"hidden"
|
Tailwind CSS class to use for the hidden state of the dismissable elements. |
Utilities
Manage and interact with KTDismiss instances using these static methods of
KTDismiss
class.
Method | Description |
---|---|
init()
|
Automatically initializes KTDismiss object for all elements with the
data-dismiss="true"
attribute on page load.
|
createInstances()
|
Allows to create KTDismiss instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element)
|
Returns the
KTDismiss
object associated with the given DOM element
element
.
|
getOrCreateInstance(element)
|
Returns the existing
KTDismiss
object for the provided DOM element
element
, or creates a new instance if none exists, then returns the same.
|
// Initialize all dismisses
KTDismiss.init()
// Initialzie pending dismisses
KTDismiss.createInstances();
// Get dismiss object
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);
<div id="my_dismisslable">
<p>
Dismissable content goes here
</p>
<button class="btn btn-primary" data-dismiss="#my_dismisslable" data-dismiss-mode="hide" id="my_dismisser">
Dismiss
</button>
</div>
Methods
Use KTDismiss component's API methods to programmatically control its behavior.
Method | Description |
---|---|
new KTDismiss(element, options)
|
Creates an object instance of KTDismiss class for the given DOM
element
and configuration
options
.
|
dismiss()
|
Executes the dismissal action on the target element. |
getTargetElement()
|
Retrieves the DOM element targeted by a specific KTDismiss instance. |
getOption(name)
|
Retrieves the value of a configuration option by
name
parameter from a KTDismiss instance.
|
getElement()
|
Retrieves the DOM element linked to a specific KTDismiss instance. |
on(eventName, handler)
|
Allows attaching event listeners to the KTDismiss custom events using the
eventName
and
eventId
string parameters. These events enable programmatic interaction based on user actions or
internal state changes of KTDismiss. The function returns
string
as a unique identifier for the registered listener, allowing you to remove it later if needed.
|
off(eventName, eventId)
|
Removes an event listener for the
eventName
and
eventId
parameters attached with the
on
method.
|
dispose()
|
Removes the KTDismiss instance from an element, including any associated data stored on the DOM element. |
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);
dismiss.dismiss();
<div id="my_dismisslable">
<p>
Dismissable content goes here
</p>
<button class="btn btn-primary" id="my_dismisser">
Dismiss
</button>
</div>
Events
KTCollapse
custom events allows you to register callback functions(event listeners)
that will be invoked automatically whenever specific custom events are triggered within the component.
Event | Description |
---|---|
dismiss
|
Triggered immediately before a dismissible element is hidden. |
dismissed
|
Triggered immediately after a dismissible element is hidden. |
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);
dismiss.on('dismiss', () => {
detail.cancel = true;
console.log('dismiss action canceled');
});
dismiss.on('dismissed', () => {
console.log('dismissed event');
});