data-remove-me

Remove the element after a delay (htmx’s remove-me extension). Made for toasts and flash messages that a server patches in.

Syntax

data-remove-me="3s"
data-remove-me="500ms"
data-remove-me

part
key	forbidden
value	optional delay (a literal): 3s, 500ms or a plain number of milliseconds; default 0. An unparsable value is an error

Modifiers

modifier	effect
__dynamic	evaluate the value as an expression that yields the delay

Toasts

two-second toasts

Toast #${$toasts} disappears in two seconds

`)">Show a toast

<div data-signals="{ toasts: 0 }">
  <button data-on:click="$toasts++; el.nextElementSibling.insertAdjacentHTML('beforeend', `<p data-remove-me=\"2s\" class=\"hot\" style=\"padding:.4rem .6rem;border-radius:.4rem\">Toast #${$toasts} disappears in two seconds</p>`)">Show a toast</button>
<div></div>
</div>

Remove immediately

Without a value the element is removed on mount, which is a way for a server patch to delete something by sending an empty replacement.

no delay

insert and remove at once inserted , visible 0

<div>
  <button data-on:click="el.insertAdjacentHTML('afterend', '<span data-remove-me>you will never see me</span>'); $inserted = ($inserted ?? 0) + 1">insert and remove at once</button>
<span>inserted <b data-text="$inserted ?? 0"></b>, visible 0</span>
</div>

Notes

The timer is cleared if the element is removed earlier by something else. Pair it with mode: append server patches for flash messages.

Register

import { removeMe } from 'sigmx/plugins'

Registering removeMe adds 239 bytes brotli (269 gzip, 533 minified) on top of the core. See bundle sizes.