Problem facing: Not able to delete single row.

For ex: I have followings rows:




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:




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.


<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>


 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!=''){
            "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));   

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

For ex: page1




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.

closed as off-topic by glls, battery.cord, Pranay Jaiswal, Reshma, Jayant Das Feb 20 at 17:23

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – glls, battery.cord, Pranay Jaiswal, Reshma, Jayant Das
If this question can be reworded to fit the rules in the help center, please edit the question.


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>

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"
    class="slds-icon slds-icon_small"
  <span class="slds-assistive-text">Delete Icon</span>


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.

  • Thnaks ...yes record id may be other solution. finally i will try that only,,,i would like to know the solution in index – SFDC FAN Feb 19 at 10:19
  • Just use indexVar instead of userData.id in value attribute. As for the same-index-for-multiple-record problem, you are anyway going to have 3 records at a time. So deleting 0th will always refer to 0th of current 3 records. When you click next/previous, you get new 3 records and 0th of those new 3 records would be deleted. So in this case, what is the issue that you are facing here? – Sarang Feb 19 at 10:52
  • again im saying what you mentioned logic alsowork. i have implemented it but im looking for solution in that index – SFDC FAN Feb 19 at 11:49
  • @AnnappaPH : That's what I am saying, you can use indexVar instead of userData.id and in controller delete the record using this index. If this is still causing some issue, please let me know what that issue is explicitly. It would help probably if you add code that fetches records after next/previous click. – Sarang Feb 19 at 12:06
  • I need a solution in index only..this approach o knew it before anyways thanks for u time.. thank u – SFDC FAN Feb 19 at 15:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.