VisualForce - How do I add a delete column in my page of adding multiple records at once?

Question

I have the following Apex Class and VisualForce page code which allows a user to create multiple child (Parent - Opportunity, Child - Quote Line Items) records at once. However, I want the user to have the ability to not only add new rows but also be able to delete existing rows that are there right on the page. The user now has to save the visualforce page with the existing records and have to delete the records one by one from the related list off of the Opportunity record.

I really don't consider myself a developer at all. This is something that I slapped together while searching online and teaching myself how to do get that functionality. So if you also have pointers on how I could write this more efficiently, please let me know!

Apex Class code

public class multiAddCEx {
    List <Quote_Item__c> CExList;
    public Id cID = ApexPages.currentPage().getParameters().get('Id'); 
    public Id getID {get; set;}
    public PageReference reset()  {
        CExList = [select name, Opportunity__c, Estimated_Quantity__c, Indexing_Level__c, Indexing_Rate_Unit__c, Indexing_Unit_Price__c, Material_Type__c, Origin_Account__c, Origin_Location__c, Storage_Rate_Unit__c, Storage_Unit_Price__c, Supplies_Line__c
                   from Quote_Item__c where Opportunity__c =: cID order by createddate limit 8 ];
        return null; }
    public List <Quote_Item__c> getCExs() {
        if(CExList == null) reset();
        return CExList;}
    public void setAccounts(List <Quote_Item__c> cexs) {
        CExList = cexs;}
    public PageReference save() {
        upsert CExList;
        ApexPages.Message myMsg = new ApexPages.message(ApexPages.Severity.Info, 'Records Saved Successfully'); 
        ApexPages.addMessage(myMsg);
        return null;}
    public PageReference add() {
        CExList.add(New Quote_Item__c(Opportunity__c = cID)); 
        return null; }
}

VisualForcePage code

<apex:page controller="multiAddCEx" sidebar="false" id="CExPage" showheader="true" tabstyle="Quote_Item__c">
    <script language="JavaScript" type="text/javascript">
    function CloseAndRefresh(){
        window.parent.location.href="/{!$CurrentPage.parameters.id}"; self.close(); }
    </script>
    <apex:pageMessages />
    <apex:form >
        <apex:pageBlock title="Quote Line Items">
            <apex:pageBlockButtons >
                <apex:pagemessages rendered="true" id="msg2" />
                <apex:commandButton value="Add New" action="{!add}" rerender="rows" status="outStatus"/>
                <apex:commandButton value="Reset" action="{!reset}" rerender="rows" status="outStatus" immediate="true" />
                <apex:commandButton action="{!save}" value="Save and Close" oncomplete="javascript:CloseAndRefresh()" rerender="rows,msg2" status="outStatus"/>
            </apex:pageBlockButtons>
            <apex:pageBlockTable width="80%" align="center" value="{!cexs}" var="c" id="rows" >
                <apex:column width="30%" headerValue="Material Type"><apex:inputField value="{!c.Material_Type__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Indexing Level"><apex:inputField value="{!c.Indexing_Level__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Estimated Quantity"><apex:inputField value="{!c.Estimated_Quantity__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Indexing Unit Price"><apex:inputField value="{!c.Indexing_Unit_Price__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Indexing Rate Unit"><apex:inputField value="{!c.Indexing_Rate_Unit__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Storage Unit Price"><apex:inputField value="{!c.Storage_Unit_Price__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Storage Rate Unit"><apex:inputField value="{!c.Storage_Rate_Unit__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Origin(Account)"><apex:inputField value="{!c.Origin_Account__c}" required="false"/></apex:column>
                <apex:column width="30%" headerValue="Origin(Location)"><apex:inputField value="{!c.Origin_Location__c}" required="false"/></apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Answer 1

You can add a column that contains a link to the delete action, like so:

<apex:column >
    <apex:outputLink value="{!URLFOR($Action.Quote_Item__c.Delete, c.id, ['retURL'=URLFOR($CurrentPage)])}" onclick="return window.confirm('Are you sure?');" >Delete</apex:outputLink>
</apex:column>

Note that I included a param which should redirect back to your current page after it finishes, but fair warning as I haven't tested this example and may have botched that part :P