function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mohammed zabi 6Mohammed zabi 6 

Lightning component iteration selected value remove from object

Hi All,

I am new to lightning App in salesforce,
I had a problem with lightning components, 
I am displaying an Array in lightning component using "aura:iteration"
In this i have a close icon next to Name like "SAMPLE X" when i click on Close icon that value need to remove from the javascript array in lightning component controller.
Please help on this
User-added image

NagendraNagendra (Salesforce Developers) 
Hi Mohammed,

Luckily the aura:iteration component has a super convenient, built-in attribute called indexVar. By leveraging indexVar I am able to pass the array index to the controller action, which can then use Array.prototype.splice() to remove an element from the list.

For example, consider the following aura:iteration element:
<aura:iteration items="{!v.leads}" var="lead" indexVar="i">
            <ui:button label="Remove" press="{!c.handleRemoveLeadButtonClick}">
                <span data-index="{!i}"></span>
            <a href="#" data-index="{!i}" onclick="{!c.handleRemoveLeadAnchorClick}">
I've intentionally included a ui:button and a standard HTML a (anchor) to show how to get the index value in both cases. The controller actions are shown below.
    handleRemoveLeadButtonClick : function(component, event, helper) {
        var self = this;  // safe reference

        var domEvent = event.getParams().domEvent;
        var bodySpan =;
        var index = bodySpan.dataset.index;
        helper.removeLead(component, index);
    handleRemoveLeadAnchorClick : function(component, event, helper) {
        var self = this;  // safe reference

        var index =;
        helper.removeLead(component, index);
And helper.removeLead() is defined as follows:
    removeLead : function(component, index) {
        var leads = component.get("v.leads");
        leads.splice(index, 1);
        component.set("v.leads", leads);

II)If you are using a checkbox to remove an item from the array list see below:

I added a button in expenseList.cmp to handle removing of the expense item.
<ui:button label="Remove" press="{!c.remove}"/>
Then, I created an event, deleteExpenseItem.evt, to capture and pass the removed item.
<aura:event type="APPLICATION">
 <aura:attribute name="expense" type="Expense__c"/>
Fire the event in expenseListController.js
remove: function(component, evt, helper) {
    var expense = component.get("v.expense");    
    var deleteEvent = $A.get("e.c:deleteExpenseItem");
    deleteEvent.setParams({ "expense": expense }).fire();
Handle the event in form.cmp.
<aura:handler event="c:deleteExpenseItem" action="{!c.deleteEvent}" />
Add the handler to formController.js.​
deleteEvent : function(component, event, helper) {
    helper.deleteExpense(component, event.getParam("expense"));
Call your Apex controller to delete the expense item and update the view in formHelper.js.​
deleteExpense : function(component, expense, callback) {

    var action = component.get("c.deleteExpense");
    var self = this;
        "expense": expense
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            //remove only the deleted expense from view
            var expenses = component.get("v.expenses");
            var items = [];
            for (i = 0; i < expenses.length; i++) {
                if(expenses[i]!==expense) {
            component.set("v.expenses", items);
And don't forget to include the delete DML operation in ExpenseController.apxc.​
public static Expense__c deleteExpense(Expense__c expense) {
    delete expense;
    return expense;

Please mark this post as solved if it helps.

Best Regards,

Aakriti GoyalAakriti Goyal
@Nagendra, I am not able to get the selected index for an anchor. It says undefined. 

Here is what I am trying to use:

<aura:iteration items="{!v.testData}" var="test" indexVar="i">
         <a href="#" id="{!i}" onclick="{!c.showDetails}" class="slds-type-focus slds-truncate"> {!test.Name} </a>  

showTravellerDetails: function (component, event, helper) { 
        var self = this;   
        var index =;          

Need Help.