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

Trevor Maltbie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Trevor Maltbie
Full Stack JavaScript Techdegree Graduate 17,021 Points

Clarify My Understanding

I want to make sure I am getting this:

listDiv.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } });

In this code, the line let li = event.target.parentNode; does not actually refer to the "li" it's just the name we have given it. It's referring to the parentNode of whatever the user targets with a click, correct? Of course in this case it has been assigned to target the parent of the BUTTON inside of listDiv which ends up being the <li>.

Then this line let ul = li.parentNode;adds onto that to get the parentNode of the previously referenced parentNode, correct?

I want to make sure I am following this correctly.

1 Answer

In this code, the line 
let li = event.target.parentNode; 
does not actually refer to the "li" it's just the name we have given it.
  • Yes, the naming of the variable li was taking in consideration before hand. In this scenario we knew that event.taget.parentNode would return the list element, so we named it "li" easier for us to understand what that variable holds.
It's referring to the parentNode of whatever the user targets with a click, correct?
  • Exactly!
Of course in this case it has been assigned to target the parent of the BUTTON inside of listDiv which ends up being the <li>.
  • Right on!
Then this line let ul = li.parentNode;adds onto that to get the parentNode of the previously referenced parentNode, correct?
  • Your logic is fine, but this is the way I would look at it
let ul = li.parentNode; adds onto that to get the parentNode of li.
  • I would use the variable that I assigned, in this scenario li, to describe let ul = li.parentNode;
  • Because it's easier to understand it this way
let ul = li.parentNode; adds onto that to get the parentNode of li.
let body = div.parentNode; adds onto that to get the parentNode of div.
let label = span.parentNode; adds onto that to get the parentNode of span.
  • rather than this way
let ul = li.parentNode; adds onto that to get the parentNode of the previously referenced parentNode.
let body = div.parentNode; adds onto that to get the parentNode of the previously referenced parentNode.
let label = span.parentNode; adds onto that to get the parentNode of the previously referenced parentNode.

You are 100% getting it. Hopefully this feedback helps!

Keep up the good work.