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.