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.

H John · Accepted Answer · 2021-11-26 10:23:31Z

0

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.

answered Nov 26, 2021 at 10:23

H John

15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I delete nested rows in Salesforce LWC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related