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 DOM Scripting By Example Adding and Removing Names Removing Names

Ru Song
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ru Song
Front End Web Development Techdegree Graduate 13,845 Points
Posted by Ru Song
.a{fill-rule:evenodd;}techdegree seal-36
Ru Song
Front End Web Development Techdegree Graduate 13,845 Points

Why I need to reference ul again?

the ul has already been referenced in the global scope, but why we need to do it again:

ul.addEventListener('click', (e) => {

if (e.target.tagName === 'BUTTON') {

const li = e.target.parentNode;

const ul = li.parentNode;    <------- ??

ul.removeChild(li)

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

This "ul" is being located by traversing from the element that triggered the event. So if the same event handler were to be used with multiple lists, it would always select the correct one.

This might not seem necessary if there is only one list on the page, but it demonstrates "good practice" programming that would be capable of performing properly with more complex pages.

Leanne He
seal-mask
.a{fill-rule:evenodd;}techdegree
Leanne He
Full Stack JavaScript Techdegree Student 6,779 Points
Leanne He
.a{fill-rule:evenodd;}techdegree
Leanne He
Full Stack JavaScript Techdegree Student 6,779 Points

Thanks, same here! I have another, related question: Does this mean that the declaration of the variable ul within the function here overrules the variable ul as defined in the global scope? Is this always the case?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Yes, and this is known as "shadowing". The global variable continues to exist and remains unchanged, but it cannot be accessed from within the function because of the new one with the same name.