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
• Screencasts
• Requirements
• Setup
• Usage
• Development
• Tests
• Deployment
• License
• Security
• Code of Conduct
• Contributions
• Developer Certificate of Origin
• Versions
• Community
• Credits

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

1. htmx.

2. Node (optional, for development).

3. Ruby (optional, for development).

4. entr (optional, for development).

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:

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

To install via NPM, run:

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

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

Upon clicking the New link, the following element would be added to the DOM after htmx resolves the request:

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.

To contribute, run:

To build, run:

To view the interactive demonstration, run:

Any changes to source code will automatically rebuild and reload the demonstration.

To test, run:

To deploy, follow these steps:

1. Ensure you are on the main branch.

2. Ensure you’ve updated the CITATION.cff and package.json with new version and committed the changes.

3. Run the following:

• Engineered by Brooke Kuhlmann.