htmx-remove

A htmx extension for DOM element removal via click events.

https://github.com/bkuhlmann/htmx-remove

Keywords

Repository

A htmx extension for DOM element removal via click events.

README.adoc

:toc: macro
:toclevels: 5
:figure-caption!:

:htmx_link: link:https://htmx.org[htmx]

= htmx Remove

This library is an {htmx_link} link:https://htmx.org/extensions[extension] that can be _optionally_ used for situations in which you need to remove an element from the DOM that was originally added by {htmx_link} _without_ making an HTTP request.

This library extension is most useful in situations in which you have clicked a link or triggered an htmx HTTP request which inserts a new DOM element such as form which has a cancel link/button. In these situations, you don't need to make an HTTP request to cancel/remove the newly added form. Instead, you only need to remove the original form.

toc::[]

== Features

* Provides a convenient solution for canceling/removing DOM elements originally added by htmx without making additional HTTP requests.

== Screencasts

video::https://alchemists.io/videos/projects/htmx-remove/demo.mp4[poster=https://alchemists.io/images/projects/htmx-remove/demo.png,width=952,height=598,role=focal_point]

== Requirements

. {htmx_link}.
. link:https://nodejs.org[Node] (optional, for development).
. link:https://www.ruby-lang.org[Ruby] (optional, for development).

== Setup

The following _assumes_ you are already using {htmx_link} and have it configured in the same manner as documented in this setup section.

To use via the HTML `script` element, add the following to your layout:

[source,html]
----

----

To use via Import Maps, add the following to your layout:

[source,html]
----



----

To install via link:https://www.npmjs.com[NPM], run:

[source,bash]
----
npm install htmx-remove
----

Once the library is installed, you only need to import it:

[source,js]
----
import "htmx-remove";
----

== Usage

A typical use case is to have a link which triggers an {htmx_link} request for adding a new form element to the DOM. Example:

[source,html]
----

  New




----

Upon clicking the _New_ link, the following element would be added to the DOM after {htmx_link} resolves the request:

[source,html]
----

  

  

  Cancel

----

In this case, clicking the _Cancel_ button would remove the entire form element from the DOM. This is made possible by first adding the `hx-ext="remove"` attribute to the `form` element and then adding the `data-remove="true"` attribute to the `button` element.

Behind the scenes, this extension will listen for click events for the first element with a `data-remove="true"` attribute. Once clicked, the corresponding element for which this extension is loaded and associated with (i.e. `form`) via the `hx-ext="remove"` attribute will be removed from the DOM.

That's it! A simple extension for dealing with DOM elements a user might want to cancel/remove because they decided adding something new wasn't necessary after all.

== Development

To contribute, run:

[source,bash]
----
git clone https://github.com/bkuhlmann/htmx-remove
cd htmx-remove
bin/setup
----

To build, run:

[source,bash]
----
bin/build
----

To view interactive demonstration, run

[source,bash]
----
# With default port.
bin/demo

# With custom port.
bin/demo 9050
----

== Tests

To test, run:

[source,bash]
----
bin/rake
----

== Deployment

To deploy, follow these steps:

. Ensure link:https://alchemists.io/projects/milestoner[Milestoner] is installed.
. Ensure you are on the `main` branch.
. Run the following:

[source,bash]
----
bin/build
npm publish
milestoner --publish
----

== link:https://alchemists.io/policies/license[License]

== link:https://alchemists.io/policies/security[Security]

== link:https://alchemists.io/policies/code_of_conduct[Code of Conduct]

== link:https://alchemists.io/policies/contributions[Contributions]

== link:https://alchemists.io/policies/developer_certificate_of_origin[Developer Certificate of Origin]

== link:https://alchemists.io/projects/htmx-remove/versions[Versions]

== link:https://alchemists.io/community[Community]

== Credits

* Engineered by link:https://alchemists.io/team/brooke_kuhlmann[Brooke Kuhlmann].

Owner

Citation (CITATION.cff)

cff-version: 1.2.0
message: Please use the following metadata when citing this project in your work.
title: htmx Remove
abstract: A htmx extension for DOM element removal via click events.
version: 2.7.0
license: Hippocratic-2.1
date-released: 2025-08-01
authors:
  - family-names: Kuhlmann
    given-names: Brooke
    affiliation: Alchemists
    orcid: https://orcid.org/0000-0002-5810-6268
keywords:
 - htmx
 - extension
 - element
 - remove
repository-code: https://github.com/bkuhlmann/htmx-remove
repository-artifact: https://www.npmjs.com/package/htmx-remove
url: https://alchemists.io/projects/htmx-remove

GitHub Events

Committers

Last synced: 9 months ago

Issues and Pull Requests

Last synced: 6 months ago

Packages