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
Travis Sly
3,947 PointsWhy is .parentNode *2 necessary?
So I'm just having some trouble wrapping my head around the why of a concept used here
so in context of:
let li = event.target.parentNode; let ul = li.parentNode
can someone please help me understand why this is needed?
In my head it seems like they are redundant and both lead to the same element.
if we set the event to filter and target only <li> elements in the selected <div>, is the parent of those li elements not the <ul> element?
2 Answers
Brandon White
Full Stack JavaScript Techdegree Graduate 35,763 PointsHi Travis,
I'm not really sure what you mean when you write, "if we set the event to filter ... is the parent of those li elements not the <ul> element". Perhaps you can provide a bit more clarification as to where you're seeing the filtering happen and/or the div elements?
The reason why both references to the parentNode are needed, is to make sure you're storing the correct element in the variable. The event listener (while added to the UL element), is fired off when the button is clicked (due to the if condition, because you don't want users removing list items by accidentally clicking the wrong thing). So the button element is the target of the event. In order to get the proper list element you have to get the parentNode of the button element that was clicked (and the button's parent is the list element which contains it). So event.target.parentNode is the list element and that's stored in the li variable. Then, in order to get the ul element, you get the parentNode of the li variable (li.parentNode), and you store that in the ul variable.
Now in this situation, there appears to be only one UL element on the page, and so perhaps you don't need the create the ul variable inside the addEventListener callback function. Instead you could write listUl.removeChild(li). In that case, you would need to only reference the parentNode of the event.target and not the parentNode of the li element.
But the way it's done in the video is a better practice, because if you do end up adding more ULs to the page and you want to be able to institute the same remove list item functionality for that UL as well, then you'll have less code to have to tweak if you're targeting the proper ul via DOM traversal.
Hope that helps.
Travis Sly
3,947 PointsHey Brandon!
Awesome, thank you very much! That did help a lot! You clarified exactly what i meant when i was talking about filtering in my initial question. (the part where we use the if statement to ensure we don't fire the event on the wrong element).
But as far as the duplicate.parentNode you answered that as well. I had overlooked the <button> being nested inside the <li>'s, I now recall that from the video. Thanks as always my friend for getting to my question so fast :)