Component.set(v.body) not clearing existing components

I’m trying to create a Component (B) inside another component (A) dynamically. Initially the child component (B) loads the script. In the child component (B) button click I’m clearing the existing child component (B) and recreating the child component dynamically in parent component (A) through an Event. But there is an unexpected behaviour, The existing child component (B) is not cleared and new Child components are added to the parent (A). But recreated child component button wasn’t working.
here is my code. Any advice / suggestions will be greatly appreciated.

TestComponent.app

<aura:application access="public">
    <c:TestComponentA />
</aura:application>

TestComponentA.cmp

<aura:component access="public">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="initiateChildCmp" event="c:regenerateChildCmpEvt" action="{!c.doInit}"/>

    <div aura:id="createCmp">

    </div>

</aura:component>

TestComponentAController.js

({
    doInit : function(cmp, event, helper) {

        $A.createComponent(
            'c:TestComponentB',
            {

            },
            function(testComponent, status, errorMessage){
                if(status === "SUCCESS"){
                    var createCmp = cmp.find("createCmp");
                    createCmp.set("v.body", [testComponent]);
                }else if(status === "Error"){
                    console.log("errorMessage:::", errorMessage);
                }
            }             
        );

    }
})

TestComponentB.cmp

<aura:component access="public">

    <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.setScriptLoaded}"/>
    <aura:attribute name="hasScriptLoaded" type="Boolean" default="false"/>
    <aura:attribute name="showText" type="Boolean" default="false"/>


    <aura:registerEvent name="initiateChildCmp" type="c:regenerateChildCmpEvt"/>

    <aura:if isTrue="{!v.showText}">
        <div>
            rendered text after JQuery Script loaded.
            <lightning:button label="regenerate TestComponentB" onclick="{!c.fire}"/>
        </div>
    </aura:if>

</aura:component>

TestComponentBController.js

({
    setScriptLoaded : function(cmp, event, helper) {
        console.log("scriptLoad:::");
        cmp.set("v.hasScriptLoaded", true);
    },
    fire : function(cmp, event, helper){
        console.log("fireEvt:::");
        var initiateChildCmp = cmp.getEvent("initiateChildCmp");
        initiateChildCmp.fire();
    }
})

TestComponentBHelper.js

({
    renderText : function(cmp){
        cmp.set("v.showText", true);
    } 
})

TestComponentRenderer.js

({
    rerender : function(cmp, helper){
        this.superRerender();
        if(cmp.get("v.hasScriptLoaded")){
            helper.renderText(cmp);
        }
    }
})

regenerateChildCmpEvt.evt

<aura:event type="COMPONENT" description="Event template" />

Answer

Attribution
Source : Link , Question Author : karthik , Answer Author : Community

Leave a Comment