Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
221,451 Points
Steven Parker
Steven Parker
221,451 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
221,451 Points
Steven Parker
Steven Parker
221,451 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.