I have used aura:iteration to create multiple ui:inputText and ui:outputText fields dynamically.

I was working on functionality to toggle ui:inputText and ui:outputText fields whenever user finishes editing the particular field. For these I need to get parent div's of both ui:inputText and ui:outputText fields.

Below is the snippet of my lightning component: enter image description here

In Controller:

 hideCourseInputWrapper : function(component, event, helper){
    //console.log('Field value: '+event.target.value);
    var inputCourseComp = event.target;                    
    var inputWrapperDiv = inputCourseComp.parentNode;
    var outputWrapperDiv = inputCourseComp.parentNode.nextSibling;

    //Hide input Wrapper
    if(!$A.util.hasClass(inputWrapperDiv, "toggle")){
        $A.util.addClass(inputWrapperDiv, "toggle");

    //Show Output Wrapper
    if($A.util.hasClass(outputWrapperDiv, "toggle")){
        $A.util.removeClass(outputWrapperDiv, "toggle");


As "event.target.parentNode" is not working for me in lightning controller to get parent node what will be work around to achieve this?

  • have u find any solution for this issue yet?
    – VarunC
    Commented Mar 10, 2018 at 10:45


You must log in to answer this question.

Browse other questions tagged .