I want actually to be able to get an attribute on a particular item in the web component iteration, but cannot get it to work.

Look for instance the following code :

    <template for:each={pills} for:item="item">


When I clicked on the delete button on one particular pill in the list, I'm calling the method handleRemove for this item, but in my js I cannot get the reference to the particular item. Here is my js code :

 handleRemove (event) {
    // eslint-disable-next-line no-console
    console.log('## set the value in the list :',event);
    // eslint-disable-next-line no-console
    console.log('## detail:',JSON.stringify(event.detail));
    // eslint-disable-next-line no-console
    console.log('## item:',event.detail.item);      


The event.detail attribute is null. The event.target attribute also is null.

I don't know which attribute will return me the value or label of the selected pill.

1 Answer 1


You can't reference component properties that are not available or don't exist

for example:

event.target.label will work,

event.target.value will not.

you can find a reference of available properties in the documentation

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .