Hi,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Account (parent) name, related contact will display and you can edit and delete the contacts (child). Also, you can create new related contact.

Visualforce:

<apex:page controller="AccConAddDeletec">
    <apex:form >
        
        <div id="formid">
            <apex:outputPanel id="tstpopup">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}" />
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" >
                    <apex:pageBlock title="My Content" mode="edit">
                        
                        <apex:pageBlockSection title="My Content Section" columns="1">
                            <apex:outputField value="{!con.Name}"/>                            
                            <apex:inputText value="{!contact.firstName}"/>                        
                            <apex:inputText value="{!contact.lastName}"/>                                 
                        </apex:pageBlockSection>
                        <apex:pageBlockButtons >
                            <apex:commandButton value="Save" action="{!updateContact}" >
                                <apex:param name="con1" assignTo="{!con.Id}" value="con1" />
                            </apex:commandButton>
                        </apex:pageBlockButtons>
                    </apex:pageBlock>
                    <apex:commandButton value="Close" action="{!closePopup}" reRender="tstpopup" />
                    
                </apex:outputPanel>
            </apex:outputPanel>
            
            <apex:pageBlock title="AccountTable">
                <apex:pageBlockTable value="{!Acclst}" var="A">
                    <apex:column headerValue="NAME OF THE ACCOUNT" > 
                        <apex:commandLink value="{!A.Name}" action="{!setupContacts}" rerender="conttable">
                            <apex:param value="{!A.Id}" name="idForConts" assignTo="{!recid}"/>
                        </apex:commandLink>
                    </apex:column>  
                    <apex:column value="{!A.Id}"/>
                    <apex:column id="two">
                        <apex:commandButton value="New Contact" action="{!showPopup}" reRender="tstpopup" >
                            <apex:param name="accid" value="{!A.id}" assignTo="{!accid}"/>
                        </apex:commandButton>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlock>
            
            <apex:pageBlock title="Contacts">
                <apex:inlineEditSupport showOnEdit="update, cancelButton" 
                                        hideOnEdit="editButton" event="ondblclick" 
                                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                <apex:pageBlockTable value="{!sub}" var="c" id="conttable">
                    <apex:column >
                        <apex:inputCheckbox value="{!c.check_box}" />
                    </apex:column>
                    <apex:column value="{!c.cs.FirstName}"/>
                    <apex:column value="{!c.cs.LastName}"/>
                </apex:pageBlockTable>
                <apex:pageBlockButtons >
                    <apex:commandButton id="update" value="Update" action="{!quickUpdate}" />
                    <apex:commandButton id="deleteit" value="Delete Selected" action="{!delete_now}"/>
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </div>
    </apex:form>
    
    <style type="text/css">
        .custPopup{
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 50%;
        padding:10px;
        position: absolute;
        width: 500px;
        margin-left: -250px;
        top:100px;
        }
        .popupBackground{
        background-color:black;
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        }
    </style>
    
</apex:page>

Controller:

public class AccConAddDeletec {
    
    public String message {get;set;}
    public List<WrapperClass> sub {get;set;}
    public Boolean check_box {get;set;}
    public List<Contact> del {get;set;}    
    public string recId{get;set;}    
    public list<Account> Acclst{get;set;}   
    public boolean displayPopup {get; set;}
    public String accid {get;set;}
    public Account con {get;set;} 
    public Contact contact {get;set;}
    public List<Contact> acnt;
    
    public AccConAddDeletec(){
        Acclst = [select Id,Name from Account LIMIT 10];
        sub=null;
        contact = new Contact();
        con = new Account();
        acnt = new List<Contact>();
    }
    
    public void closePopup() {
        displayPopup = false;
    }
    
    public void showPopup() {
        contact = new Contact();
        displayPopup = true;
        con = [SELECT Id, Name, Phone, (SELECT firstName, lastName FROM Contacts) FROM Account WHERE Id = :accid];
    }
    
    public void updateContact(){
        contact.AccountId = con.Id;
        acnt.add(contact);
        System.debug('acnt-> ' + acnt);
        upsert acnt;
        closePopup();
    }
    
    public void setupContacts() {
        sub = new List<WrapperClass>();
        for(Contact cr : [SELECT Id, FirstName, LastName from Contact where AccountId=:recId]){
            sub.add(new WrapperClass (cr, false));
        }
    }
    
    public PageReference quickUpdate(){
        try{
            List<Contact> accts = new List<Contact>();            
            for(WrapperClass w : sub){
                accts.add(w.cs);
            }
            UPDATE accts;
            return ApexPages.CurrentPage();
        }catch(Exception e){
            message='Data Base error during saving...';
            ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, message));
            return null;
        }
    }
    
    public PageReference delete_now(){
        del=new list<Contact>();
        for(WrapperClass cc: sub){
            if(cc.check_box){
                del.add(cc.cs);
            }
        }
        delete del;   
        PageReference pr = new PageReference(System.currentPageReference().getURL());
        pr.setRedirect(true);
        return pr;
    }
    
    public class WrapperClass {
        public Contact cs {get; set;}
        public Boolean check_box {get; set;}
        
        public WrapperClass(Contact cs, Boolean check_box){
            this.cs = cs;
            this.check_box = check_box;
        }
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas