Event Delegation in _hyperscript

This is how you do it:

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

Or more concisely:

on click tell closest <li/> to target
	remove yourself

on click tell closest <li/> to target
	remove yourself

---

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

<ul>
	{% for item in items %}
		<li _="on click remove me">{{ item }}</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 you, which refers to the “element being told”.