Hi,

Below is the sample code.

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];
    }
}

Hope this helps.

Please mark this post as solved by marking the best answer if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra