remove-me extension

src/ext/remove-me.js

@@ -0,0 +1,17 @@
+(function(){
+    htmx.defineExtension('remove-me', {
+        onEvent: function (name, evt) {
+            if (name === "processedNode.htmx") {
+                var elt = evt.detail.elt;
+                if (elt.getAttribute) {
+                    var timing = elt.getAttribute("remove-me") || elt.getAttribute("data-remove-me");
+                    if (timing) {
+                        setTimeout(function () {
+                            elt.parentElement.removeChild(elt);
+                        }, htmx.parseInterval(timing));
+                    }
+                }
+            }
+        }
+    });
+})();

test/ext/remove-me.js

@@ -0,0 +1,55 @@
+describe("remove-me extension", function(){
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function()  {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('removes elements properly', function(done)
+    {
+        var div = make('<div id="d1" hx-ext="remove-me" remove-me="20ms">Click Me!</div>')
+        byId("d1").should.equal(div)
+        setTimeout(function(){
+            should.equal(byId("d1"), null);
+            done();
+        }, 40);
+    });
+
+    it('removes classes properly', function(done)
+    {
+        var div = make('<div class="foo bar" hx-ext="class-tools" classes="remove bar">Click Me!</div>')
+        should.equal(div.classList.contains("foo"), true);
+        should.equal(div.classList.contains("bar"), true);
+        setTimeout(function(){
+            should.equal(div.classList.contains("foo"), true);
+            should.equal(div.classList.contains("bar"), false);
+            done();
+        }, 100);
+    });
+
+    it('adds classes properly w/ data-* prefix', function(done)
+    {
+        var div = make('<div hx-ext="class-tools" data-classes="add c1">Click Me!</div>')
+        should.equal(div.classList.length, 0);
+        setTimeout(function(){
+            should.equal(div.classList.contains("c1"), true);
+            done();
+        }, 100);
+    });
+
+    it('extension can be on parent', function(done)
+    {
+        var div = make('<div hx-ext="class-tools"><div id="d1" classes="add c1">Click Me!</div></div>')
+        should.equal(div.classList.length, 0);
+        setTimeout(function(){
+            should.equal(div.classList.contains("c1"), false);
+            should.equal(byId("d1").classList.contains("c1"), true);
+            done();
+        }, 100);
+    });
+
+
+})

test/index.html

@@ -109,6 +109,9 @@
 
 <script src="ext/bad-extension.js"></script>
 
+<script src="../src/ext/remove-me.js"></script>
+<script src="ext/remove-me.js"></script>
+
 
 <!-- events last so they don't screw up other tests -->
 <script src="core/events.js"></script>

www/extensions.md

@@ -62,5 +62,6 @@ The following extensions that are tested and distributed with htmx:
 | [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx
 | [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
 | [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
+| [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time
 
 </div>

www/extensions/remove-me.md

@@ -0,0 +1,21 @@
+---
+layout: layout.njk
+title: </> htmx - high power tools for html
+---
+
+## The `remove-me` Extension
+
+The `remove-me` extension allows you to remove an element after a specified interval.
+
+### Usage
+
+```html
+<div hx-ext="remove-me">
+    <!-- Removes this div after 1 second -->
+    <div remove-me="1s">To Be Removed...</div>
+</div> 
+```
+
+### Source
+
+<https://unpkg.com/htmx.org/ext/remove-me.js>