I have done a simple component which display contacts list which involves two components 1.ContactList - Parent (Fetches the contact details) 2.ContactListItem - Child (Display individual contact detail) [**Component Level Event**](https://developer.salesforce.com/trailhead/lightning_components/lightning_components_events_handle) is used to carry the contact from ContactListItem to ContactList which holds the source contact array where contact removal is done. **ContactList.cmp** <aura:component access="public" controller="ContactController"> <aura:attribute name="contacts" type="Contact[]" access="private"/> <aura:handler name="init" action="{!c.doInit}" value="{!this}" /> <aura:handler name="deleteContact" event="c:deleteContactEvt" action="{!c.removeContact}" /> <table class="borderCls"> <tr> <th class="borderCls">Name</th> <th class="borderCls">Phone</th> </tr> <aura:iteration items="{!v.contacts}" var="contact"> <c:ContactListItem contactRec="{!contact}"/> </aura:iteration> </table> <button onclick="{!c.addContact}">Add Contact</button> </aura:component> **ContactListController.js** ({ doInit : function(component, event, helper) { var action = component.get("c.getContacts"); action.setCallback(this, function(data) { console.log(data.getReturnValue()); component.set("v.contacts", data.getReturnValue()); }); $A.enqueueAction(action); } , addContact : function(component, event, helper){ var contacts = component.get("v.contacts"); var len = contacts.length; contacts.push({ 'Name':'Test Contact - '+len, 'Phone':'123'+len }); component.set("v.contacts",contacts); } , removeContact : function(component, event, helper){ var selCont = event.getParam("selectedContact"); var contacts = component.get("v.contacts") var index = contacts.indexOf(selCont); if (index > -1) { contacts.splice(index, 1); } component.set("v.contacts",contacts); } }) **ContactListItem.cmp** <aura:component > <aura:attribute name="contactRec" type="Contact" access="private"/> <aura:registerEvent name="deleteContact" type="c:deleteContactEvt"/> <tr > <td class="borderCls" >{!v.contactRec.Name}</td> <td class="borderCls" >{!v.contactRec.Phone}</td> <td> <ui:button label="Delete" press="{!c.deleteContact}"/></td> </tr> </aura:component> **ContactListItemController.js** ({ deleteContact : function(component, event, helper) { var event = component.getEvent("deleteContact"); event.setParams({ 'selectedContact':component.get("v.contactRec") }); event.fire(); } }) **deleteContactEvt.evt (Component Level Event)** <aura:event type="COMPONENT" description="Delete Contact Event"> <aura:attribute name="selectedContact" type="Contact"/> </aura:event> **ApexController** public class ContactController { @AuraEnabled public static List<Contact> getContacts() { return [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone From Contact order by LastModifiedDate desc limit 10]; } } I Hope this helps