I have a lightning compone thtat display a list of items :

<aura:attribute name="listLines" type="String[]"/>

<aura:if isTrue="{!v.listLines != null}">
            <div class="slds-text-title_caps">Liste des filtres</div>
            <table class="slds-table slds-table--bordered">
                    <aura:iteration items="{!v.listLines}" var="item" indexVar="i">
                            <td><ui:outputText value="{!item.ObjectName}">{!item.ObjectName}</ui:outputText></td>
                            <td><ui:outputText value="{!item.FieldName}"/></td>
                            <td><ui:outputText value="{!item.Operator}"/></td>
                            <td><ui:outputText value="{!item.Value}"/></td>
                            <td><div class="slds-col slds-size_1-of-5 slds-p-horizontal_medium smallBtn">
                                <a href="#" data-index="{!i}" onclick="{!c.handleRemoveItem}">
                                    <lightning:icon iconName="utility:delete" alternativeText="Supprimer la ligne" />

The javascript method for deleting the item :

handleRemoveItem : function(component, event, helper) {
    var self = this;  // safe reference

    var index = event.target.dataset.index;
    helper.removeItem(component, index);

    console.log('index : ' + index);

And the helper :

removeItem : function(component, index) {
    var lines = component.get("v.listLines");
    lines.splice(index, 1);
    component.set("v.listLines", lines);

    console.log('lines removeItem : ');

My problem is that when I click a delete button, it delete all of the items of the list (nothing is displayed) and not only the item related to the delete button.

But when I look at the logs, I can see that the list of itme is not empty, there is all the undeleted items in it.

For example when there ise 2 elements on the list, and I click on the delete bitton of one, after that nothing at all is displayed on the screen (as if the list is empty) but in the logs I can see that the length of the list is 1 (this is the undeleted item)

I don't know how to get the list of the undeleted item to stay displayed.


When I run the code in the "preview" mode of the developer console, it works perfectly, but my lightning component is used in lightning experience, in a tab of an application.

  • Can you add sample data for list lines attribute
    – RedDevil
    Jun 27, 2018 at 9:45
  • For example, I have 2 lines 0 :{FieldName: "champ 1", ObjectName: "objet 1", Operator: "=", Value: "dhgfhf"} 1:{FieldName: "champ 2", ObjectName: "objet 2", Operator: "=", Value: "fghjhk,"}
    – dou
    Jun 27, 2018 at 9:48
  • And if I delete a line, I have something like this : 0:{FieldName: "champ 1", ObjectName: "objet 1", Operator: "=", Value: "dhgfhf"} (this is the values I get from the javascript logs)
    – dou
    Jun 27, 2018 at 9:49
  • Am facing similar issue.. salesforce.stackexchange.com/q/221129/19118 Probably bug with aura:iteration Jun 27, 2018 at 9:50

2 Answers 2


The Problem is on the anchor tag. The property of href was always a redirect reference. Just try with lightning:buttonIcon tag to get index position, like this.

<lightning:buttonIcon iconName="utility:delete" alternativeText="Supprimer la ligne" value="{!i}" onclick="{!c.handleRemoveItem}" />

And get index position on controller,

var index = event.getSource().get('v.value');
  • I try your modifications, but when I try to delete an item, I got a javascript error "Cannot read property 'index' of undefined"
    – dou
    Jun 27, 2018 at 11:49

I finally resolve my issue by changing the tag (as mentionned by @am_Aravi) by this :

<button onclick="{!c.handleRemoveItem}" data-index="{!i}" class="deleteBtn"><lightning:icon iconName="utility:delete" alternativeText="Supprimer la ligne" /></button>*

and with no change in the controller it works for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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