Single row deleting issue while using aura:iteration [closed]

Question

Problem facing: Not able to delete single row.

For ex: I have followings rows:

row1

row2

row3

I am able to delete row 2 and row 3. But I am not able to delete row1. I believe problem is in splice method of js.

If I put console.log for single row,it shows it's index as 0.

It doesn't mean that I cant delete index 0 row

Another scenario:

for example:

row1

row2

row3

I stated deleting from row1,row2 (upto down).I can delete it,consider I deleted row 1&2.Now row 3 is remaining. If I want to delete that, it is not deleted.

More in detail:

I deleted row1 -index(0),after that deleting row2 (index 0) [Row 1 is already deleted] & now I am trying to delete row 3 (again index 0 [I have already deleted row 1&row2]) but row3 deletion isn't working.

component:

<aura:attribute name="LstOfAddedUser" type="List" description="Hold the list of added userUser Data"/>
<aura:attribute name="UserdataList" type="List"/>
<aura:iteration items="{!v.UserdataList}" var="userData" indexVar="i">
    <a onclick="{!c.removeRow}" data-index="{!i}">
        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
        <span class="slds-assistive-text">Delete Icon</span>
    </a>
</aura:iteration>

Js:

 removeRow : function(cmp, event, helper) {                     
 var index = event.target.dataset.index;
    var ListOfUsr=cmp.get("v.LstOfAddedUser");
    ListOfUsr.splice(index, 1);
    //some custom logic below
    var action = cmp.get("c.deleteRow");
    var pageNumber = cmp.get("v.PageNumber");  
    var pageSize = cmp.get("v.pageSize");
    if(ListOfUsr!=null && ListOfUsr!=''){
        action.setParams({
            "selectedIds":JSON.stringify(ListOfUsr.map(thisItem => thisItem.Id)),
            "pageNumber": pageNumber,
            "pageSize": pageSize,
            
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state ==="SUCCESS")
            {
                var resultData = response.getReturnValue();
                cmp.set("v.UserdataList", resultData.userdataList);
                cmp.set("v.PageNumber", resultData.pageNumber);
                cmp.set("v.TotalRecords", resultData.totalRecords);
                cmp.set("v.RecordStart", resultData.recordStart);
                cmp.set("v.RecordEnd", resultData.recordEnd);
                cmp.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));   
            }   
        });
        $A.enqueueAction(action);
    }
}           

Question 2: Instead of maintaining row Index its possible to delete through Id

For ex: page1

row1

row2

row3

Next page

row 4

row 6

row 7

I have implemented pagination in existing logic, problem here is that both row 1 & row4 indices are same (It because of every time I'm calling server method after clicking next and previous for getting next bunch of records). It causes some problem for enabling buttons.

Answer 1

Can you check if you are really getting index through your code:

var index = event.target.dataset.index;

I would suggest to replace dataset with id and index with recordID as follows:

<aura:iteration items="{!v.UserdataList}" var="userData" indexVar="i">
    <a onclick="{!c.removeRow}" id="{!userData.id}">
        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
        <span class="slds-assistive-text">Delete Icon</span>
    </a>
</aura:iteration>

where id is the unique id representing the data record. Then you can find the record from the list in controller by looping over the list.

Also, if delete operation is to be invoked only on click of icon , you can use lightning:buttonIcon or lightning:buttonIconStateful instead that would get rid of anchor tag altogether.

<aura:iteration items="{!v.UserdataList}" var="userData" indexVar="i">
  <lightning:buttonIcon variant="error"
     iconName="utility:delete"
    class="slds-icon slds-icon_small"
    size="small"
    alternativeText="icon"
    value="{!userData.id}"
    onclick="{!c.removeRow}"/>
  <span class="slds-assistive-text">Delete Icon</span>
</aura:iteration>

Controller:

removeRow : function(cmp, event, helper) {                     
 var id= event.getSource().get('v.value');
//use this id to find relevant record and update your list.

Additionally, for efficient and easy JS specific operations, I would suggest to add Lodash library in your org.