{"id":18837081,"url":"https://github.com/bkuhlmann/htmx-remove","last_synced_at":"2025-10-04T11:12:40.218Z","repository":{"id":208125556,"uuid":"720883531","full_name":"bkuhlmann/htmx-remove","owner":"bkuhlmann","description":"A htmx extension for DOM element removal via click events.","archived":false,"fork":false,"pushed_at":"2025-09-26T13:40:20.000Z","size":212,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-26T15:23:40.274Z","etag":null,"topics":["element","extension","htmx","remove"],"latest_commit_sha":null,"homepage":"https://alchemists.io/projects/htmx-remove","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bkuhlmann.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.adoc","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["bkuhlmann"]}},"created_at":"2023-11-19T21:56:30.000Z","updated_at":"2025-09-26T13:40:01.000Z","dependencies_parsed_at":"2023-11-26T23:22:13.739Z","dependency_job_id":"20508210-8c5b-4c04-952c-6228d88b4671","html_url":"https://github.com/bkuhlmann/htmx-remove","commit_stats":null,"previous_names":["bkuhlmann/htmx-remove"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/bkuhlmann/htmx-remove","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkuhlmann%2Fhtmx-remove","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkuhlmann%2Fhtmx-remove/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkuhlmann%2Fhtmx-remove/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkuhlmann%2Fhtmx-remove/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bkuhlmann","download_url":"https://codeload.github.com/bkuhlmann/htmx-remove/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkuhlmann%2Fhtmx-remove/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277184126,"owners_count":25775285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-27T02:00:08.978Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element","extension","htmx","remove"],"created_at":"2024-11-08T02:33:54.079Z","updated_at":"2025-10-04T11:12:40.206Z","avatar_url":"https://github.com/bkuhlmann.png","language":"Ruby","readme":":toc: macro\n:toclevels: 5\n:figure-caption!:\n\n:htmx_link: link:https://htmx.org[htmx]\n\n= htmx Remove\n\nThis 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.\n\nThis 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.\n\ntoc::[]\n\n== Features\n\n* Provides a convenient solution for canceling/removing DOM elements originally added by htmx without making additional HTTP requests.\n\n== Screencasts\n\nvideo::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]\n\n== Requirements\n\n. {htmx_link}.\n. link:https://nodejs.org[Node] (optional, for development).\n. link:https://www.ruby-lang.org[Ruby] (optional, for development).\n\n== Setup\n\nThe following _assumes_ you are already using {htmx_link} and have it configured in the same manner as documented in this setup section.\n\nTo use via the HTML `script` element, add the following to your layout:\n\n[source,html]\n----\n\u003cscript src=\"https://unpkg.com/htmx-remove@latest\"\n        integrity=\"sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT\"\n        crossorigin=\"anonymous\"\u003e\n\u003c/script\u003e\n----\n\nTo use via Import Maps, add the following to your layout:\n\n[source,html]\n----\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"htmx-remove\": \"https://unpkg.com/htmx-remove@latest\"\n    }\n  }\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e\n  import \"htmx-remove\";\n\u003c/script\u003e\n----\n\nTo install via link:https://www.npmjs.com[NPM], run:\n\n[source,bash]\n----\nnpm install htmx-remove\n----\n\nOnce the library is installed, you only need to import it:\n\n[source,js]\n----\nimport \"htmx-remove\";\n----\n\n== Usage\n\nA typical use case is to have a link which triggers an {htmx_link} request for adding a new form element to the DOM. Example:\n\n[source,html]\n----\n\u003ca hx-get=\"/tasks/new\"\n   hx-trigger=\"click\"\n   hx-target=\".tasks\"\n   hx-swap=\"beforeend\"\n   href=\"/tasks/new\"\u003e\n  New\n\u003c/a\u003e\n\n\u003csection class=\"tasks\"\u003e\n\u003c/section\u003e\n----\n\nUpon clicking the _New_ link, the following element would be added to the DOM after {htmx_link} resolves the request:\n\n[source,html]\n----\n\u003cform class=\"body\" action=\"/tasks\" method=\"post\" hx-ext=\"remove\"\u003e\n  \u003c!-- Implementation details... --\u003e\n\n  \u003cinput name=\"commit\"\n         type=\"submit\"\n         value=\"Save\"\n         hx-trigger=\"click\"\n         hx-target=\"closest .task\"\n         hx-swap=\"outerHTML\"\n         hx-post=\"/tasks\"\u003e\n\n  \u003cbutton data-remove=\"true\"\u003eCancel\u003c/button\u003e\n\u003c/form\u003e\n----\n\nIn 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.\n\nBehind 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.\n\nThat'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.\n\n== Development\n\nTo contribute, run:\n\n[source,bash]\n----\ngit clone https://github.com/bkuhlmann/htmx-remove\ncd htmx-remove\nbin/setup\n----\n\nTo build, run:\n\n[source,bash]\n----\nbin/build\n----\n\nTo view interactive demonstration, run\n\n[source,bash]\n----\n# With default port.\nbin/demo\n\n# With custom port.\nbin/demo 9050\n----\n\n== Tests\n\nTo test, run:\n\n[source,bash]\n----\nbin/rake\n----\n\n== Deployment\n\nTo deploy, follow these steps:\n\n. Ensure link:https://alchemists.io/projects/milestoner[Milestoner] is installed.\n. Ensure you are on the `main` branch.\n. Run the following:\n\n[source,bash]\n----\nbin/build\nnpm publish\nmilestoner --publish\n----\n\n== link:https://alchemists.io/policies/license[License]\n\n== link:https://alchemists.io/policies/security[Security]\n\n== link:https://alchemists.io/policies/code_of_conduct[Code of Conduct]\n\n== link:https://alchemists.io/policies/contributions[Contributions]\n\n== link:https://alchemists.io/policies/developer_certificate_of_origin[Developer Certificate of Origin]\n\n== link:https://alchemists.io/projects/htmx-remove/versions[Versions]\n\n== link:https://alchemists.io/community[Community]\n\n== Credits\n\n* Engineered by link:https://alchemists.io/team/brooke_kuhlmann[Brooke Kuhlmann].\n","funding_links":["https://github.com/sponsors/bkuhlmann"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkuhlmann%2Fhtmx-remove","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkuhlmann%2Fhtmx-remove","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkuhlmann%2Fhtmx-remove/lists"}