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!

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!

• javascript

• 3 In the HTML you provided, elements with class EmbedImageWidget don't seem to have parent nodes. – Bango Commented Nov 20, 2017 at 10:15
• 1 Can you include an example on jsfiddle ? – Andrei Savin Commented Nov 20, 2017 at 10:16
• It is because they are being injected from another file. I uploaded a new image that shows this. – Rodney Wormsbecher Commented Nov 20, 2017 at 10:17

2 Answers 2

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

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

this is the best solution, but there is some problem, your img element generated after running your js code. when you try to get parent node of img element in js, there is no img element with EmbedImageWidget class.

it's because of ng-if.