How can I delete nested rows in LWC
<template for:each={parentArray} for:item="parent" for:index="index">
//Code for parent rows
<template for:each={parent.childArray} for:item="child" for:index="indx">
//Code for child rows
<td>
<lightning-button-icon icon-name="utility:delete" value={indx} variant="bare" onclick={handleRemove}></lightning-button-icon>
</td>
</template>
</template>
So, when I click on delete then I am able to get the index of the child row. How would I know that this row belongs to this parent row. Something like this:
this.parentArray[0].childArray.splice(index, 1);
Just like this. Here I have manually added the parent index but how can I get the index dynamically in my JS controller.
I have got my answer and I am posting it here if anyone faces the same issue then they can relate it. What I did. I just a used an attribute if the and passed my parent index there and the same I accessed in my JS controller
<template for:each={parentArray} for:item="parent" for:index="index">
//Code for parent rows
<template for:each={parent.childArray} for:item="child" for:index="indx">
//Code for child rows
<td>
<lightning-button-icon icon-name="utility:delete" value={indx} variant="bare" onclick={handleRemove} name={index}></lightning-button-icon>
</td>
</template>
const parentIndex = event.target.name;
this.parentArray[parentIndex].childArray.splice(index, 1);
It worked.