Is there a way to do an hx-on once?

[donferi]

I'm trying to figure out whats the best way to remove some nodes / css classes when a user starts to type on an input.

My use case is when a form is submitted, I return some html that renders in-line errors. However, I want those errors to go away as soon as the user starts typing. Here is an example (I'm using JSX, sorry!):

<input
  name={name}
  id={id}
  value={value}
  type={type}
  hx-on:keydown={`
    htmx.remove(htmx.find('#error-${id}'));
    htmx.removeClass(htmx.find('#label-${id}'), 'text-red-500');
  `}
/>

However, this works fine but after the first call this throws an error as the element no longer exist. Whats the best approach for achieving this?

Would be nice to have an hx-on:keydown:once

[ethnoxcom]

Do not remove the element, instead hide it: htmx.addClass(htmx.find('#error'), 'hideMeClass');

[andryyy]

Makes me wonder if we can add a hx-on to the parent form element. Should be possible due to event bubbling.

[Telroshan]

Inline event handlers, not only advised against by the MDN doc (I mean the title is litterally Inline event handlers — don't use these), do not allow as much configuration as an event listener. That's the trade-off you have to work with when using inline event handlers instead of listeners added from JS scripts

It seems there are workarounds to reproduce that mechanism, but if you're looking for "the clean way", it'd be with an event listener, using the options.once parameter, such as

elt.addEventListener("keydown", function() {
  htmx.remove(htmx.find('#error-${id}'));
  htmx.removeClass(htmx.find('#label-${id}'), 'text-red-500');
}, { once: true })