data-on-remove attribute

A custom Datastar attribute plugin that runs an expression when the element is removed from the DOM.

1<button
2  data-on:click="el.remove()"
3  data-on-remove="console.log('I removed myself', el)"
4>
5  Click to remove
6</button>

#Getting started

The plugin expects you to provide an import map that specifies the location of the datastar module, then it's a simple matter of including a <script type="module"> element for the plugin. For example:

1<script type="importmap">
2  {
3    "imports": {
4      "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js"
5    }
6  }
7</script>
8<script type="module" src="https://cdn.jsdelivr.net/gh/regaez/data-on-remove@1.0.0/data-on-remove.min.js"></script>

You can view the source code on Github.

#Why?

There are various reasons, some better than others, why you might want to be able to run an expression when an element is removed from the DOM. For example:

  • Performance telemetry; measure client-side performance, e.g. the time between when a user interaction starts and when the server responds with a PatchElements event that removes some HTML.
  • Security/monitoring; perhaps you are displaying some sensitive information, such as access tokens, payment information, etc., and want the client to confirm with the server that the content is no longer shown, instead of blindly trusting that a PatchElements event was successful.
  • Signal cleanup; you may need the client to delete signals when the only component they are associated with no longer exists on the page (disclaimer: if you care about following an idiomatic Datastar approach, this would be better accomplished by your server via a PatchSignals event).

#Documentation

The data-on-remove attribute runs Datastar expressions when the element it is attached to is removed from the DOM. Within these expressions, you have access to the following special variables:

  • el; the element that the data-on-remove attribute was attached to.
  • parent; the element that was previously the parent of the removed node.

If the data-on-remove attribute is removed from the element prior to the element itself being removed, then the expression will not run.

#Examples

You can inspect the HTML to see how each of the examples work.

  1. Demo of the code snippet above; logs to console when the button removes itself.

  2. Clicking the button below will remove this text which will trigger an expression to clear the namespaced signals it defines.

    Signals:

  3. You can retain a reference to the element and restore it after it has been removed.

  4. You can use parent within the expression to access the parent node of the removed element.

    No, persistence is futile!

  5. And, of course, the expression can be triggered when the element is removed via a PatchElements event sent from the server.

  6. The expression isn't triggered when the attribute is removed from this paragraph element via a PatchElements event sent from the server.

  7. When an element's id attribute changes, Datastar's morph algorithm will remove the element and insert a new one, even if nothing else about the element, or its DOM subtree, changes. This will trigger the data-on-remove expression.