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 RSVP Checkbox

Sufiyaan Haroon
seal-mask
.a{fill-rule:evenodd;}techdegree
Sufiyaan Haroon
Full Stack JavaScript Techdegree Student 9,558 Points
Posted by Sufiyaan Haroon
.a{fill-rule:evenodd;}techdegree
Sufiyaan Haroon
Full Stack JavaScript Techdegree Student 9,558 Points

I don't understand parentNode with event.target

ul.addEventListener('change', e => {
    const checkbox = event.target;
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

    if (checked) {
        listItem.className = 'responded';
    } else {
        listItem.className = '';
    }
});

Why does checkbox.parentNode.parentNode; return li. Shouldn't it be returning the parent of the parent of ul instead of a child of ul?

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The checkbox is the child of the label, the label is the child of the li, and the li is the child of the ul.

So checkbox.parentNode would be the label, and checkbox.parentNode.parentNode is the li.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

parenNode returns the parent of the selected element.

So checkbox.parentNode would be the label, since it is the parent of the checkbox.
And checkbox.parentNode.parentNode is the li, since the li is the parent of the label which is the parent of the checkbox.

Vaidehi S
Vaidehi S
5,731 Points
Vaidehi S
Vaidehi S
5,731 Points

if the eventListener is on ul then does the ul become the target? and how does checkbox know that label is the parent as we are not specifying it here in the code. so events target is ul and the parent of the ul is div who's parent is body.

Bubbling will go up from the bottom not from ul to checkbox? So I dont understand how this is working. Please help ty.