htmx Remove
1.3.0
This library is an htmx 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 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.
Features
-
Provides a convenient solution for canceling/removing DOM elements originally added by htmx without making additional HTTP requests.
Screencasts
Setup
The following assumes you are already using htmx 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:
<script src="https://unpkg.com/htmx-remove@latest"
integrity="sha384-v6VOSW2F42qo+95FGFDZCY72+0md5SolbibTa8Kgn8DkCrevZNkgTsWXdEMXyeRX"
crossorigin="anonymous">
</script>To use via Import Maps, add the following to your layout:
<script type="importmap">
{
"imports": {
"htmx-remove": "https://unpkg.com/htmx-remove@latest"
}
}
</script>
<script type="module">
import * as htmx_remove from "htmx-remove";
</script>To install via NPM, run:
npm install htmx-removeOnce the library is installed, you only need to require it:
<script src="htmx-remove.js"></script>Usage
A typical use case is to have a link which triggers an htmx request for adding a new form element to the DOM. Example:
<a hx-get="/tasks/new"
hx-trigger="click"
hx-target=".tasks"
hx-swap="beforeend"
href="/tasks/new">
New
</a>
<section class="tasks">
</section>Upon clicking the New link, the following element would be added to the DOM after htmx resolves the request:
<form class="body" action="/tasks" method="post" hx-ext="remove">
<!-- Implementation details... -->
<input name="commit"
type="submit"
value="Save"
hx-trigger="click"
hx-target="closest .task"
hx-swap="outerHTML"
hx-post="/tasks">
<button data-remove="true">Cancel</button>
</form>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:
git clone https://github.com/bkuhlmann/htmx-remove
cd htmx-remove
bin/setupTo build, run:
npm run buildTo view interactive demonstration, run
# With default port.
bin/demo
# With custom port.
bin/demo 9050Tests
To test, run:
bin/rakeTo only check code quality, run:
npm run qualityTo only check specs, run:
bin/rspecDeployment
To deploy, follow these steps:
-
Ensure Milestoner is installed.
-
Ensure you are on the
mainbranch. -
Run the following:
npm run build
npm publish
milestoner --publish <version>Credits
-
Engineered by Brooke Kuhlmann.