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?


1 Answer 1


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">
    <ui:button label="Show Message" press="{!c.showMessage}"/>

The corresponding testController.js:

    showMessage: function(component, event, helper) {
                           {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.

  • 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? 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. 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. 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 .