get parent node with getElementsByClassName

Question

I am looking for a javascript solution of getting the parentNode from my object. However no matter what I seem to do it keeps saying 'undefined'.

This is my code:

HTML

<div class="EmbedImageWidget" ng-if="vm.imageLink == '' || vm.imageLink == 'undefined'">
    <img ng-src="{{ vm.imageUrl }}" />
</div>

<div class="EmbedImageWidget" ng-if="vm.imageLink" >
    <a href="{{vm.imageLink}}" target="_blank">
        <img ng-src="{{ vm.imageUrl }}" />
    </a>
</div>

JS

var imageElement = document.getElementsByClassName("EmbedImageWidget");
console.log(imageElement);

OBJECT

I have tried using

    var imageElement = document.getElementsByClassName("EmbedImageWidget").parentNode;
    console.log(imageElement);

    var imageElement = document.getElementsByClassName("EmbedImageWidget")[0].parentNode;
    console.log(imageElement);

However both options didn't work. Any help will be much appreciated. Cheers!

Answer 1

You need to use document.getElementsByClassName("EmbedImageWidget")[0].parentNode instead of document.getElementsByClassName("EmbedImageWidget").parentNode .This code is working fine Here

---

But I think you want to access Image element and that is not parent of div . That is child of that div instead