Adding or Removing Rows dynamically using wrapper class

Visual force Page Code

<apex:page controller="AddLineItemsController">
     <apex:form >
         <apex:pageBlock title="Add Members" id="out">
             <table>
                 <th>
                     Contact Last Name
                 </th>
                 <th>
                     Phone
                 </th>
                 <apex:repeat value="{!lstWI}" var="w">
                     <tr>
                         <td>
                             <apex:inputfield value="{!w.objC.lastName}" />
                         </td>
                         <td>
                             <apex:inputfield value="{!w.objC.Phone}" />
                         </td>
                         <td>
                             <apex:commandLink action="{!doAdd}" immediate="true" rerender="out">
                                 <apex:image value="{!$Resource.addIcon}" style="height:20px;width:20px;"/>
                             </apex:commandLink>
                         </td>
                         <td>
                             <apex:commandLink action="{!doRemove}" immediate="true" reRender="out">
                                 <apex:image value="{!$Resource.removeIcon}" rendered="{!IF(w.index ==0,false,true)}" style="height:20px;width:20px;"/>
                                  <apex:param name="toDelIdent" value="{!w.index}" assignTo="{!delIndex}"/>
                             </apex:commandLink>
                         </td>
                     </tr>
                 </apex:repeat>
             </table>
         </apex:pageBlock>
         <apex:commandButton value="Save" action="{!doSave}" />
     </apex:form>
</apex:page>



Class Code


public class AddLineItemsController {

    public static Integer delIndex {get; set;}
    public PageReference doRemove() {
        Integer pos = -1;
        for(Integer i=0;i<lstWI.size();i++){
            if(lstWI[i].index == delIndex){
                pos = i;
            }
        }
        if(-1 != pos){
            lstWI.remove(pos);
        }
        return null;
    }
 
    public List<Contact> lstC;
    public pagereference doSave(){
            lstC = new List<Contact>();
            for(wrapInner objWI : lstWI){
                objWI.objC.AccountId = apexPages.currentpage().getparameters().get('id');
                lstC.add(objWI.objC);
            }
            if(lstC.size()>0){
                Insert lstC;
            }
            return (new pagereference('/'+apexPages.currentpage().getparameters().get('id')).setredirect(true));
    }


    public PageReference doAdd() {
        objWI = new wrapInner();
        objWI.objC = new contact();
        objWI.index = ++iCount;
        lstWI.add(objWI);
        return null;
    }

    public Integer iCount = 0;
    public AddLineItemsController(){
        lstWI = new List<wrapInner>();
        objWI = new wrapInner();
        objWI.objC = new contact();
        objWI.index = iCount;
        lstWI.add(objWI);
    }
 
    public wrapInner objWI{get;set;}
    public List<wrapInner> lstWI{get;set;}
 
    public class wrapInner{
        public Integer index{get;set;}
        public Contact objC{get;set;}  
    }
}


How it works
1. Create a button on Account Detail page.

2. When Click on "Add Contacts", opens a visual force page like below. and can add / remove the rows as required.

Thank you!!!