Delete Row Functionality via Visualforce

Delete row functionality via Visualforce comes handy when a user is required to add rows or more fields to the existing ones on a web page. This is covered in my post Adding row functionality to Existing ones on Visualforce Page. While adding rows, it is possible a user adds more rows or fields than needed. This gives rise to a use case of deleting extra rows.

To achieve this feature, Delete method was added to the Controller and for the Visualforce code <apex:pageBlockSection> was used to add the static form while <apex:pageBlockTable> was used to add the number of columns required including the Delete link.

In this post, the same custom object – Customer as in the above post is used.

Below is the User Interface (UI) that is the Visualforce page after clicking the Add button three times

The Visualforce code used:

<apex:page controller="Add_RemoveCustomerCon" showHeader="false" sidebar="false" >
 
                <apex:form >
               <apex:pageBlock title="Adding Or Deleting Customers Records">
                <apex:pageBlockButtons location="top" >
                <apex:commandButton value="Save" action="{!saveRec}" />
                </apex:pageBlockButtons>
                            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Add +" action="{!addField}" reRender="theRow" immediate="true"/>
            </apex:pageBlockButtons>
               <apex:pageBlockSection columns="1">
                    <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Customer Name"></apex:outputLabel>                             
                      <apex:inputField value="{!customer.Name}" id="theName1"/>
                     </apex:pageBlockSectionItem>
                     <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Bank Name"></apex:outputLabel>                             
                       <apex:inputField value="{!customer.Bank_Name__c}" />
                     </apex:pageBlockSectionItem>                   
               <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Status"></apex:outputLabel>                             
                      <apex:inputField value="{!customer.Customer_Status__c}" id="theName1"/>
                     </apex:pageBlockSectionItem>             
        
               </apex:pageBlockSection>
     
            
                <apex:pageBlockTable value="{!custWrapperList }" var="cwl" id="theRow">           
         
                                       
                    <apex:column headervalue="Customer Name">                             
                    <apex:inputField value="{!cwl.cust.Name}" />
                     </apex:column>
                      <apex:column headervalue="Bank Name">                             
                    <apex:inputField value="{!cwl.cust.Bank_Name__c}" />
                     </apex:column>
                      <apex:column headervalue="Status">                             
                    <apex:inputField value="{!cwl.cust.Customer_Status__c}" />
                     </apex:column>                  
                  
                        <apex:column >
                          <apex:commandLink action="{!deleteAddedRow}" value="Del">
                          <apex:param name="index" assignTo="{!index}" value="{!cwl.countWrap}"/>
                        </apex:commandLink>
                        </apex:column>                                                                                  
                </apex:pageBlockTable> 
                </apex:pageBlock>
        </apex:form>        
</apex:page>

The Controller:

public class Add_RemoveCustomerCon {


    public List<Customer__c> customerList{get;set;}
    public Customer__c customer {get;set;}
    public list<CustomerWrapper> custWrapperList {get;set;}
    public Integer counter {get;set;}
     //public Id id {get;set;}
    
    public Add_RemoveCustomerCon(){
           counter = 0;           
           customerList = new List<Customer__c>();
           custWrapperList = new List<CustomerWrapper>();       
           
    }
    
    public PageReference addField(){
        Customer__c  custr= new Customer__c();
        CustomerWrapper cWrap = new CustomerWrapper(custr); 
        
        counter++;
        cWrap.countWrap = counter; 
       custWrapperList.add(cWrap); 
        return null;    
    }    
    
    public PageReference saveRec(){
        List<Customer__c> cusList = new List<Customer__c>();
        if(!custWrapperList.isEmpty()){
            for(CustomerWrapper wrapper :custWrapperList){
                cusList.add(wrapper.cust);
            }
        }
        if(!cusList.isEmpty()){
            upsert cusList;
        }
       ApexPages.Message myMessage = new ApexPages.Message(ApexPages.Severity.Info,'Record Saved Successfully.');
       ApexPages.addMessage(myMessage); 
        return null;
    }
      public PageReference deleteAddedRow(){
        
        
        Integer addedRow = Integer.valueOf(Apexpages.currentpage().getParameters().get('index'));
        
        for(Integer i=0; i < custWrapperList.size(); i++){
            if(custWrapperList[i].countWrap == addedRow){
                custWrapperList.remove(i);     
            }
        }       
        counter--;
        return null;    
    }
    
    public class CustomerWrapper {
        public Customer__c cust {get;set;}
        public Integer countWrap{get;set;}
        
        public CustomerWrapper(Customer__c cus){
            this.cust = cus;  
             
        }
    }
}

Below is the User Interface before clicking the Add button

Notice, the static form part is not compulsory, you can tweak the code to your own advantage