Delete element on hx-trigger custom event without making a request

[cdock1029]

I have multiple instances of this component on page. I can respond to hx-trigger event of "propertyDeleted123" by making a dummy hx-get request to an endpoint that responds with nothing and swap it with nothing.

But is there a way to not have to do the hx-get and just remove an element after event triggers?

Almost like if the trigger could execute arbitrary calls, maybe something with hyperscipt, or an hx-execute that can hook into the trigger...

<section class="flex items-center justify-between property">
  <template
    hx-get="/property/{{ .ID }}"
    hx-trigger="propertyUpdated{{ .ID }} from:body"
    hx-target="closest section"
    hx-swap="outerHTML"
  ></template>
  <template
    hx-get="/null"
    hx-trigger="propertyDeleted{{ .ID }} from:body"
    hx-target="closest #property{{ .ID }}"
    hx-swap="delete swap:250ms"
  >
  </template>
  <span>{{ .Name }}</span>
  <div class="flex space-x-4">
    <button
      hx-get="/property/{{ .ID }}?edit=1"
      hx-target="closest section"
      hx-swap="outerHTML"
    >
      Edit
    </button>
    <button hx-delete="/property/{{ .ID }}" hx-confirm="Do you want to delete?">
      X
    </button>
  </div>
</section>

[cdock1029]

Related question about arbitrary execution that isn't ajax requests

#1709

[cdock1029]

This works, would have to do transition animations manually.

 <template
    hx-trigger="propertyDeleted{{ .ID }} from:body"
    hx-on::trigger="this.closest('#property{{ .ID }}').remove()"
  >

related:

#1845 (comment)

[andryyy]

Another idea is

hx-on::after-request="event.detail.successful?this.remove():null;"

Not sure if the success check is a correct short hand if in JS. But it looks okay. 😄

[andryyy]

Oh, you would of course need to change "this" to the desired element.

You could also add a hx-target attribute with the closest div as target and set hx-swap="outerHTML".
An answer of your server with no content (but NOT a 204 code) would wipe the element, too.

[h4l]

Can put an empty data URL in hx-get so that it doesn't need an actual request: hx-get="data:text/html,".

[andryyy]

That’s nice.

[hariharaniyer]

Genius! 🙌

[goertzenator]

I couldn't get this to work. #2828 might be contributing, but even after setting selfRequestsOnly to false it still failed.

[emepetres]

me neither, I'm getting htmx:invalidPath, tried to add the event listener suggested in #2828 but no luck

[bennadel]

One thing to consider is that - I think - removing an element outside of the normal HTMX swapping won't actually de-init the nodes. Which means, if you have event-bindings that have been setup outside of the nodes, such as with from:body or something, those won't automatically get removed. I'm still trying to figure this stuff out; but, I've been using the htmx.swap() method to remove stuff though the HTMX pipeline.