https://github.com/bkuhlmann/htmx-remove
A htmx extension for DOM element removal via click events.
https://github.com/bkuhlmann/htmx-remove
element extension htmx remove
Last synced: 3 months ago
JSON representation
A htmx extension for DOM element removal via click events.
- Host: GitHub
- URL: https://github.com/bkuhlmann/htmx-remove
- Owner: bkuhlmann
- License: other
- Created: 2023-11-19T21:56:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-26T13:40:20.000Z (3 months ago)
- Last Synced: 2025-09-26T15:23:40.274Z (3 months ago)
- Topics: element, extension, htmx, remove
- Language: Ruby
- Homepage: https://alchemists.io/projects/htmx-remove
- Size: 207 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.adoc
- Funding: .github/FUNDING.yml
- License: LICENSE.adoc
- Citation: CITATION.cff
Awesome Lists containing this project
README
: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]
----
{
"imports": {
"htmx-remove": "https://unpkg.com/htmx-remove@latest"
}
}
import "htmx-remove";
----
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].