Cannot Access Child Element Via Code That I KNOW Exists

- 1 answer

I'm currently changing the code within a theme for my shopify account. I'm looking to remove a child from a specific element, but cannot figure out how to do so. Using Chrome's Dev tools, I am able to look at how the elements are arranged and work my way through it. Then, using console.log within my code (I'm not great at this), I'm able to traverse where I intend to be.

Now, I get to a parent node that has two children (image below) but using .children() only returns a single element. Using .sibling() on that element (I was hoping this work-around would end up working for me somehow) returns nothing. Not even using .find() or a selector with the element's class name finds anything. It's absolutely perplexing me. I mean, all I want to do is remove the stupid thing, but doing a .empty() on the parent successfully removes the first child but does nothing to the second! I've looked inside the child and double checked that it correctly notes the parent I'd expect, in case something stupid like that was going on (as if it belonged to something else / existed somewhere else but was added to any number of elements on the page).

children of parent node

What is that img.zoomImg child??? Why can I not do anything to it via code when I can see that it exists using the devtools?

Any help would be greatly appreciated, thank you.



EdmCoff was absolutely right. I got it in my head that it had to be more difficult than it actually was. My problem was that I was expecting the console.log to snapshot, when in actuality the object is real-time updated in the log. At the spot where I was doing my stuff, that child did not exist. Doing it later after the page loaded caused the child to be found perfectly, thus why I thought I knew it existed via the log. I'll have to do some brain storming to work around that, but that's what I needed; thank you so much.