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 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”.