Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Antonio Ascue Avalos
Antonio Ascue Avalos
3,023 Points

How does the parentNode method get the parent of an event element?

Hi everybody I do understand the overall flow of this code. However, I do not get how the stored li element as reference to the target event know we refer to the li-HTML attribute within the <div></div> domain? I mean that what I assume happens given the code structure.

let li =  event.target; // reference to the target element of the event
    let ul = li.parentNode; // reference of the li parent node
    ul.removeChild(li);

2 Answers

jamesjones21
jamesjones21
9,260 Points
jamesjones21
jamesjones21
9,260 Points

it is all to do with the way bubbling and traversing the DOM works, when an event listener is triggered by a click for instance, it then takes in the event.target as the li, where the event has taken place, it works its way backwards and then says ok this is where the event has happened (li) then the ul tag is it's parent, it then sends the message of the bubbling occurrence to the window object (High point of the hierarchy), and with that in mind, it then fires the code within the function attached to the addEventListener(). Hope this helps, but if not I can try an explain it another way.

:)

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

If I understand your question, it's not about the event so much as the "parentNode" itself. That's a property, not a method, and when the node is created and connected to the DOM, that property is set to refer to the node in the DOM tree that this one is attached on.

Then at any future time, the "parentNode" property can be accessed to get a reference to the next node up the hierarchy (the "parent"). The parent of a list item (li) will always be a list (either ul or ol), and in this case it happens to be a ul.