Dynamically Add Row / Remove Row in PageBlock Table in Visualforce Page

In this Post, Explore More about the How To Add Row or Remove Row in PageBlockTable in Visualforce Page

To achieve this Functionality I Created The One Simple Apex Controller and Visualforce Page.

Apex Class

public class AddOrRemoveRowController {
    private Integer counter = 0;
    public list<WrapperData> lstWrapperData {get;set;}
    
    public AddOrRemoveRowController() {
        lstWrapperData =  new list<WrapperData>();
        addRow();
    }
    
    // Adding Rows 
    public PageReference addRow() {
        counter++;
        lstWrapperData.add(new WrapperData(new Account(), counter));
        return null;
    }
    
    // Removing The Rows
    public PageReference removeRow() {
        Integer iRemoveRow = Integer.valueOf(Apexpages.currentpage().getParameters().get('index'));
        for(Integer i=0; i<lstWrapperData.size(); i++) {
            if(lstWrapperData[i].iIndex == iRemoveRow ) {
                lstWrapperData.remove(i);     
            }
        }
        return null;
    }
    
    // Wrapper Class
    public class WrapperData {
        public Account objAcc {get;set;}
        public Integer iIndex {get;set;}
        
        public WrapperData(Account objAcc, Integer iRow) {
            this.objAcc = objAcc;
            this.iIndex = iRow;
        }
    }
}

Visualforce Page

<apex:page controller="AddOrRemoveRowController" tabStyle="Account">
    <apex:form >
        <apex:pageBlock >
            <apex:outputPanel id="showpageBlockData" >
                <apex:pageBlockSection columns="1" title="Dynamically Add or Remove Row" collapsible="false">
                    <apex:pageBlockTable value="{!lstWrapperData}" var="wd" id="pgb" >
                        <apex:column headerValue="Account Name">
                            <apex:inputField value="{!wd.objAcc.Name}" />
                        </apex:column>
                        <apex:column headerValue="Industry">
                            <apex:inputField value="{!wd.objAcc.Industry}" />
                        </apex:column>
                        <apex:column headerValue="Phone">
                            <apex:inputField value="{!wd.objAcc.Phone}" />
                        </apex:column>
                        <apex:column headerValue="Account Type">
                            <apex:inputField value="{!wd.objAcc.Type}" />
                        </apex:column>
                        <apex:column > 
                            <apex:commandLink value="Add Row" action="{!addRow}" reRender="pgb" style="color:#61afe8;" />&nbsp;&nbsp;||&nbsp;&nbsp;
                            <apex:commandLink value="Remove Row" action="{!removeRow}" reRender="pgb" style="color:red;" >
                                <apex:param value="{!wd.iIndex}" name="index" />
                            </apex:commandLink>
                        </apex:column>
                    </apex:pageBlockTable>
                </apex:pageBlockSection>           
            </apex:outputPanel> 
        </apex:pageBlock>
    </apex:form>
</apex:page>

Happy Learning!!!