Re-create or Reload Lightning component from Visualforce page

Question

I have a requirement to Reload a lightning component from a Visualforce page based on the Tab clicked in VF page with different Values.

 <a id="{!formKey}" onclick="hideShowPickList('{!ptConfigstng.PT_ObjectName}','{!ptConfigstng.PT_CompName}',{!formKey})" onload="hideShowPickList('{!PTConfigSttngLSt[0].PT_ObjectName}','{!PTConfigSttngLSt[0].PT_CompName}',0)" class="slds-tabs--default__link"> {!ptConfigstng.PT_ObjectName} </a>

A new component gets created below the old component everytime a different link is clicked.

Need to reload that original component by passing the value from the Visualforce page or Clear the Old component and create a new with current Values

  <script type="text/javascript">  
 function hideShowPickList(ObjName,CompName,loopnum){
       debugger;
            $Lightning.use("c:App_Details", function() {     
                console.log('app invoked');
            $Lightning.createComponent("c:LCSearch",{ 
                 PTObjName : ObjName,
                 PTCompName : CompName},"lightning",
            function(component) {         
                    console.log('component invoked');
                });
            });
         }

Suggest me If am wrong here with Best practice methods.

Answer 1

Before creating the lightning Component into VF Page clear the content of the Div and then create.

Use below code for Clearing the Content

document.getElementById("lightning").innerHTML = "";

After clearing the content and then create the new component

function hideShowPickList(ObjName,CompName,loopnum){
        document.getElementById("lightning").innerHTML = "";
       debugger;
            $Lightning.use("c:App_Details", function() {     
                console.log('app invoked');
            $Lightning.createComponent("c:LCSearch",{ 
                 PTObjName : ObjName,
                 PTCompName : CompName},"lightning",
            function(component) {         
                    console.log('component invoked');
                });
            });
         }