0

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.

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

0

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');
1
  • 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
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .