Remove item from list in lightning component

Question

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">
                <tbody>
                    <aura:iteration items="{!v.listLines}" var="item" indexVar="i">
                        <tr>
                            <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" />
                                </a>
                            </div></td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </aura:if>

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 : ');
    console.log(lines);
},

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.

EDIT

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.

Answer 1

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');

Answer 2

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.