0

Can I remove one of elements from lightning component with help js controller?

For example from below code I try delete element aura:id="out2". 

<aura:component> 
    <div class="slds-align--absolute--center">
        <ui:outputText aura:id="out1" class="slds-text-align--left" value="text1" />
        <ui:outputText aura:id="out2" class="slds-text-align--left" value="text2" />
    </div>
</aura:component>
Improve this question
5
  • I don't know if you can remove or not but you can hide that element.
    – Muzammil Bajaria
    Apr 16, 2017 at 16:53
  • I know this but I trying remove it.
    – JJanek
    Apr 16, 2017 at 17:05
  • 1
    you can use an aura:if and put the component with id 'out2' inside it and use a condition to render aura if. so if the condition is show the element will be rendered by the component if not it will be removed from the component. This is the difference between css show hide and aura if. in case of css show hide its just hidden from UI but its still part of the component but aura if removes it from the component
    – RedDevil
    Apr 16, 2017 at 20:09
  • in what cases do you want to display/remove the element? if there is some logic prior to rendering @RedDevil provided a useful approach, if not, can you expand on your use case?
    – glls
    Apr 17, 2017 at 1:32
  • You can use JS or jQuery to remove this @user43999
    – Tariq
    Apr 17, 2017 at 6:21

1 Answer 1

Reset to default
1

It's kind of a judgemental call. Basically, there are 2 ways to show hide markup.

Option 1: Using CSS show/hide. This basically means you would use a CSS class to hide the elements in UI but the HTML Markup, attributes will still exist in your DOM(Document object model). In plain technical CSS terms you would add a class property: display: none; https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_show_hide_markup.htm

The advantage of this approach is that if you are basically going to hide 1 or 2 markup elements there is no point in using an aura:if and writing some logic to show/hide it as it will destroy the element and re-create it based on conditions. In CSS show/hide it will just be hidden from UI

Option 2: Using aura:if The use case for this would be let's say you are showing a 3 to 5 step wizard navigation. Basically, like payment cart, you wouldn't want to keep all steps in your component hidden using CSS as the DOM can get quite heavy if each step is going to have like 10 fields and you can never say the user is going to scroll through all 5 steps always. In this case, there is no point in loading all 5 steps together. It's better to lazy load them as and when it's needed. This is a perfect use case for aura:if. Below markup illustrates that and you load each step when the user clicks next button by setting the attribute 'step' as shown below

<aura:if isTrue="{!v.Step == 0}">  
<c:step0comp></c:step0comp></aura:if>

 <aura:if isTrue="{!v.Step == 1}">  
<c:step1comp></c:step1comp></aura:if>


 <aura:if isTrue="{!v.Step == 2}">  
<c:step2comp></c:step2comp></aura:if>

This could kind of like a design pattern that you can follow and put the server side controller in the container component which includes all these steps and just wire them up using events and aura:methods. So all server calls are delegated to server component and the individual data components just act as self-contained steps just taking care of their data and validations.

Hope this helps. Let me know if you need more information.

Improve this answer

You must log in to answer this question.

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