Salesforce Dynamically Adding/Deleting rows in visualforce

Addition or removal of line items can be done dynamically on click of a button without refreshing the complete page. It can be achieved easily by using the reRender attribute of the visualforce component.

Below code is a simple example which shows Contacts linked to an Account. User can delete or add multiple contacts to an account by clicking the “Add Attendee” button. The code uses a index called rowNumber which keeps track of the row number to be deleted.

Visualforce Page :

<apex:page standardController="Account" extensions="addAttendee" sidebar="false">
 <apex:form >
 <apex:pageBlock title="Accounts" id="pb">
 <apex:pageMessages />
 <apex:variable var="rowNumber" value="{!0}"/>
 <apex:pageblockSection columns="1">
 <apex:pageBlockTable title="Contacts" var="acc" value="{!attendeeList}">