Delete Row Functionality via Visualforce

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

Row Functionality 1

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 location="bottom">
                <apex:commandButton value="Add +" action="{!addField}" reRender="theRow" immediate="true"/>
               <apex:pageBlockSection columns="1">
                    <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Customer Name"></apex:outputLabel>                             
                      <apex:inputField value="{!customer.Name}" id="theName1"/>
                     <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Bank Name"></apex:outputLabel>                             
                       <apex:inputField value="{!customer.Bank_Name__c}" />
               <apex:pageBlockSectionItem >                    
                      <apex:outputLabel value="Status"></apex:outputLabel>                             
                      <apex:inputField value="{!customer.Customer_Status__c}" id="theName1"/>
                <apex:pageBlockTable value="{!custWrapperList }" var="cwl" id="theRow">           
                    <apex:column headervalue="Customer Name">                             
                    <apex:inputField value="{!cwl.cust.Name}" />
                      <apex:column headervalue="Bank Name">                             
                    <apex:inputField value="{!cwl.cust.Bank_Name__c}" />
                      <apex:column headervalue="Status">                             
                    <apex:inputField value="{!cwl.cust.Customer_Status__c}" />
                        <apex:column >
                          <apex:commandLink action="{!deleteAddedRow}" value="Del">
                          <apex:param name="index" assignTo="{!index}" value="{!cwl.countWrap}"/>

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); 
        cWrap.countWrap = counter; 
        return null;    
    public PageReference saveRec(){
        List<Customer__c> cusList = new List<Customer__c>();
            for(CustomerWrapper wrapper :custWrapperList){
            upsert cusList;
       ApexPages.Message myMessage = new ApexPages.Message(ApexPages.Severity.Info,'Record Saved Successfully.');
        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){
        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

Row Functionality 2

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


This Post Has 2 Comments

  1. Apeksha Parate

    I am getting an error
    (Unknown constructor ‘BookNow.BookNow(ApexPages.StandardController controller)’

    1. Janet Epebinu

      Hi Apeksha,

      Did you use a custom controller or controller extension? If the “BookNow” is a custom controller, it will not accept a parameter. Only the controller extension takes a parameter. You can also add the code snippet so that I can take a look.



Comments are closed.