Event Delegation in _hyperscript
This is how you do it:
on click
tell the closest
to the target
remove yourself
-- do more stuff...
-- "you" refers to the clicked list item
Or more concisely:
on click tell closest
to target
remove yourself
on click tell closest <li/> to target
remove yourself
I’ve seen some people use a pattern like this:
{% for item in items %}
{{ item }}
{% endfor %}
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”.