Add Delete Row Dynamic In Lightning Component

Lightning Component :

Create a belowdynamicRow.cmpgiven component

<aura:component>
    <aura:attribute name="contactList" type="Contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="slds-box">
        <!--Table Part-->           
        <table class="slds-table slds-table_bordered slds-table_cell-buffer"> 
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate">S.No</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="First Name">First Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Last Name">Last Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                </tr>
            </thead>   
            <tbody>      
                <aura:iteration items="{!v.contactList}" var="item" indexVar="index">
                    <tr class="slds-text-title_caps">
                        <td> 
                            {!index + 1}
                        </td>
                        <td>
                            <ui:inputText class="slds-input" value="{!v.item.FirstName}"/>
                        </td>
                        <td>
                            <ui:inputText class="slds-input" value="{!v.item.LastName}"/>
                        </td>
                        <td>
                            <ui:inputPhone class="slds-input" value="{!v.item.Phone}"/>
                        </td>
                        <td>
                            <!-- conditionally Display Add or Delete Icons if rowIndex is 0 then show Add New Row Icon else show delete Icon --> 
                            <aura:if isTrue="{!index == 0}">
                                <a onclick="{!c.AddNewRow}">
                                    <lightning:icon iconName="utility:add" class="slds-icon slds-icon_small" size="small" alternativeText="add"/>
                                    <span class="slds-assistive-text">Add Icon</span>
                                </a>    
                                <aura:set attribute="else">
                                    <a onclick="{!c.removeRow}" id="{!index}">
                                        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                                        <span class="slds-assistive-text">Delete Icon</span>
                                    </a>
                                </aura:set> 
                            </aura:if>
                        </td> 
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>

JavaScript Controller :

Create a belowdynamicRowController.js

({
    doInit : function(component, event, helper) {
        // create a Default RowItem [Contact Instance] on first time Component Load
        // get the contactList from component and add(push) New Object to List  
        var RowItemList = component.get("v.contactList");
        RowItemList.push({
            'sobjectType': 'Contact',
            'FirstName': '',
            'LastName': '',
            'Phone': ''
        });
        // set the updated list to attribute (contactList) again    
        component.set("v.contactList", RowItemList);
    },
    AddNewRow : function(component, event, helper){
        var addRowInList = component.get("v.contactList");
        var contactObj = new Object();
        addRowInList.push(contactObj);
        component.set("v.contactList",addRowInList);     
    },
    removeRow : function(component, event, helper){
        var whichOne = event.target.getAttribute("id")
        var AllRowsList = component.get("v.contactList");
        AllRowsList.splice(whichOne, 1); 
        component.set("v.contactList", AllRowsList);
    }, 
})

Output :