There are several ways of adding event listeners to list items in your template. You also need to make sure that the event handler can identify which item the event is related to. This step shows one way of achieving this.

The example currently has an array of strings in the things state property. Each string is rendered as a list item with a "Delete" button, but the button does not do anything yet.

First, create a method that will be called when the button is clicked. The method should take an item's index as a parameter, and remove that item from the things array.

// my-element.ts
class MyElement extends LitElement {
  ⋮
  private _deleteThing(index: number) {
    this.things = this.things.filter((_, i) => i !== index);
  }
}

// my-element.js
class MyElement extends LitElement {
  ⋮
  _deleteThing(index) {
    this.things = this.things.filter((_, i) => i !== index);
  }
}

Use immutable data patterns to trigger an update.

The filter() array method returns a new array which is assigned to this.things. Since the reference stored in this.things changes, Lit will know to update the component when _deleteThing() is called. If the array is mutated instead with something like the splice() array method, an update must be manually requested. For more information, see Mutating objects and array properties.

Now register the handler on the button for each item as the array is being mapped.

// my-element.ts
  render() {
    return html`
      ⋮
      <ul>
        ${map(
          this.things,
          (thing, index) => html`
            <li>
              ${thing}
              <button @click=${() => this._deleteThing(index)}>Delete</button>
            </li>
          `
        )}
      </ul>
    `;
  }

// my-element.js
  render() {
    return html`
      ⋮
      <ul>
        ${map(
          this.things,
          (thing, index) => html`
            <li>
              ${thing}
              <button @click=${() => this._deleteThing(index)}>Delete</button>
            </li>
          `
        )}
      </ul>
    `;
  }

Now clicking the delete button should remove the item. Note that an inline arrow function is used here to create a closure, so each list item gets a function that calls _deleteThing with its own index.

While closures are fine for most cases, there are other ways to achieve this behavior.

For instance, you can add a property or attribute to the element that dispatches the event. The event handler can then access that data using event.target. When listening to an event that bubbles, you can use event delegation to avoid attaching event listeners on every item. For more information, see Listening to events fired from repeated templates.