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 JavaScript and the DOM (Retiring) Traversing the DOM Using parentNode to Traverse Up the DOM

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Why do we need parentNode of ul

Just cannot figure out why does Guil needed to select UL as such

  let li = event.target.parentNode;
  let ul = li.parentNode;

whereas UL parentNode is listDiv, why not use use

let li = event.target.parentNode;
let ul = event.target
ul.remove(li)

This is my thinking or am I missing something?

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The "event.target" is the child of the list item, not the parent. It's the button that was clicked.

So to get the list itself, which is the parent of the list item, the "parentNode" property of the list item is used.

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Steven Parker Still confused, why we need parent of UL? when we want to remove LI in it. so parent of LI is UL which we can got from event.target.parentNode

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The parent of the event target is the list item. Maybe this "ancestry" list will help:

  • event.target :point_right: the button
  • event.target.parentNode :point_right: the list item (li)
  • li.parentNode :point_right: the list itself (ul) (also event.target.parentNode.parentNode)
Michael Williams
Michael Williams
Courses Plus Student 8,059 Points
Michael Williams
Michael Williams
Courses Plus Student 8,059 Points

Steven Parker, I don't think this is the right terminology, but is the list item a "parent" of sorts to the button, then — hence the parentNode property? Or is it something else since the button is within the list item?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

You got it right, the list item is the "parent" of the button. Any "child" element will be contained inside it's "parent" element.

Debra Kellington
Debra Kellington
3,135 Points
Debra Kellington
Debra Kellington
3,135 Points

Thank you. This conversation helped me to understand it better. I, too, was confused as to the need for the parentNode of the button. The list item is actually the parent.