How can I delete nested rows in Salesforce LWC

Question

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.

score 0 · Answer 1 · answered Nov 26 '21 at 10:23

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.

How can I delete nested rows in Salesforce LWC

1 Answers1