Event Delegation in _hyperscript

on click
  tell the closest <li/> to the target
    remove yourself
    -- do more stuff...
    -- "you" refers to the clicked list item

I’ve seen some people use a pattern like this:

<ul>
  {% for item in items %}
    <li _="on click remove me"></li>
  {% endfor %}
</ul>

This is convenient to write if you have a server-side templating system, but has a few issues:

• The code needs to be parsed N times where N is the number of items.
• The resulting HTML is bloated.
• If you add more items client-side, you need to repeat the code there.

The pattern for resolving this is called event delegation. Here’s how you might do it in JavaScript:

ul.addEventListener('click', e => {
  const li = e.target.closest('li')
  if (!li) return
  li.remove()
})

We add a single event listener to the enclosing list, which finds the item that was clicked and manipulates it.

In _hyperscript, the tell command allows us to manipulate an element other than me conveniently, by changing the implicit target from me to ypu, which refers to the element being “told”.