Dynamically Add/Delete rows in Visualforce Page

Here is a simple example of adding or deleting rows dynamically in a VF page using the concept of Wrapper Class.


Controller--

public with sharing class AddNewRows
{

    public List<ContactWrapper> cwrap {get;set;}
    public Contact con {get;set;}
    public Integer rowIndex {get;set;}
    
    public AddNewRows(ApexPages.StandardController controller)
    {
        rowIndex = 0;
        cwrap = new List<ContactWrapper>();
        con = new Contact();
        cwrap.add(new ContactWrapper(con,0)); //call ContactWrapper class //constructor
    }
    
    public void addRows()
    {
        rowIndex += 1;
        Contact c = new Contact(); // create new instance of object
        cwrap.add(new ContactWrapper(c,rowIndex));  
    }
    
    public void save()
    {
        List<Contact> ccList = new List<Contact>();
        for(ContactWrapper wrapper : cwrap)
        {
            ccList.add(wrapper.ct);
        }
        insert ccList;
    }
    
    public void deleteRow()
    {       
        cwrap.remove(rowIndex);
        rowIndex -= 1;
    }
    
    public class ContactWrapper
    {
        public Integer row {get;set;}
        public Contact ct {get;set;} 
             
        public ContactWrapper(Contact cons,Integer ro)
        {
            this.ct = cons;
            this.row = ro;
        }
    } 

}

Visualforce Page--


<apex:page StandardController="Contact" extensions="AddNewRows">
  <apex:form >
     <apex:pageBlock >
         <apex:commandButton value="AddRow" action="{!addRows}" reRender="lab"/>
               
        <apex:pageBlockSection id="lab">
            <apex:pageBlockTable value="{!cwrap}" var="cn">
                <apex:column headerValue="FirstName">
                    <apex:inputField value="{!cn.ct.firstname}"/>
                </apex:column>
                
                <apex:column headerValue="LastName">
                    <apex:inputField value="{!cn.ct.lastname}"/>
                </apex:column>
                
                <apex:column >
                <apex:commandLink value="remove" action="{!deleteRow}" style="color:red" reRender="lab">
                    <apex:param value="{!cn.row}" name="rowIndex" assignTo="{!rowIndex}"/>
                </apex:commandLink>
                
                </apex:column>
           </apex:pageBlockTable> 
            
            <apex:commandButton value="Svae" action="{!save}" reRender="lab"/>
       </apex:pageBlockSection> 
      </apex:pageBlock>
  </apex:form>

</apex:page>


Output ---