How to access parent <div> element of ui:inputText when input fields are created dynamically in aura iteration?

Question

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:

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?