7

I have been reading through the Lightning Developer Guide. Could someone tell me if it is possible to remove a Lightning Component from the DOM? The use case I have is that I am displaying a success or error message based on a record update in Salesforce. I have that error message showing for 5 seconds, and then it will automatically be removed from the body of the <div> where I inserted it. However, it still remains in the DOM. I am using the $A.createComponent() method to create the ui:message component dynamically and was thinking that I would want to remove it from the DOM so that new ui:message components are not continually added each time.

Could someone provide some insight?

Thanks!

Improve this question

1 Answer 1

Reset to default
14

You can use facets to do this. For example, a simple test.app:

<aura:application access="GLOBAL">
    <aura:attribute name="messages" type="Aura.Component[]" access="GLOBAL"/>
    <div aura:id="messages">
        {!v.messages}
    </div>
    <ui:button label="Show Message" press="{!c.showMessage}"/>
</aura:application>

The corresponding testController.js:

({
    showMessage: function(component, event, helper) {
        $A.createComponent("ui:outputText",
                           {value: "Message created at " + Date.now()},
                           function(cmp) {
                               component.set("v.messages", [cmp]);
                               setTimeout(function() {
                                   $A.run(function() {
                                       component.set("v.messages", []);                                       
                                   });
                               }, 5000)
                           });
    }    
})

The facet is an attribute of type Aura.Component[] that you render in the desired spot using an expression such as {!v.messages}. When the element is created, set the value of this facet to be an array with one component, the [cmp] in the code. Set a timeout, etc., then set the value of this facet to be an empty array with []. Make sure to wrap the calls with $A.run.

If you use the Chrome or other tools to inspect the DOM, you'll see the component elements appear and disappear.

If this isn't what you're looking for, please provide more details.

Improve this answer
4
  • I think I was heading in the same direction that you took, @Skip. Thanks for this. One clarification, the first thing you do is have "component.set("v.messages", [cmp])", then you use component.set("v.messages", [])". I was actually doing that in my function already. When the component would disappear and I would reload the component I would still see the component in the DOM, just grayed out. I guess this makes sense since "cmp" is just removed from the body of "component" but not the DOM necessarily. I was not using the $A.run(). What would be the significant of using that method there?
    – Daniel Fuller
    Jul 8, 2015 at 12:18
  • Here's a good description of using $A.run: developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Skip Sauls
    Jul 8, 2015 at 16:53
  • Great! Thanks. I am still testing how robust this method is. In the documentation I have only seen it used to create small components, not more complex ones.
    – Daniel Fuller
    Jul 11, 2015 at 21:31
  • 1
    I have a slightly different use case, and while this might work for it with a lot of looping and rebuilding of things that already exist, I find it an extremely clunky way to do things. Why not add a component.remove() to the framework, you'll still control the DOM but make developer's lives a lot easier.
    – Scott Morrison
    Sep 29, 2016 at 17:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .