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 Interacting with the DOM Traversing the DOM Traversing up the DOM with parentNode

LETITA BUZEA
seal-mask
.a{fill-rule:evenodd;}techdegree
LETITA BUZEA
Full Stack JavaScript Techdegree Student 4,247 Points
Posted by LETITA BUZEA
.a{fill-rule:evenodd;}techdegree
LETITA BUZEA
Full Stack JavaScript Techdegree Student 4,247 Points

Clicking on one of the list items makes them all disappear

I wrote the code as instructed in the video. The buttons work, but the list items disappear all at once if I click on one of them.

Joseph Yhu
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Yhu
PHP Development Techdegree Graduate 48,637 Points

Could you provide us with your code so we can have a look at it?

Unsubscribed User
Unsubscribed User
7,943 Points

Have you changed the event listener parameter to 'click' instead of 'mouseover'?

2 Answers

Jason Larson
Jason Larson
8,359 Points

Make sure in the taskList.addEventListener function that you change your if statement to look for the tagName button instead of LI, as below.

taskList.addEventListener("click", (event) => {
    if (event.target.tagName == "BUTTON") {
        let button = event.target;
        let li = button.parentNode;
        li.remove();
    }
});
Stephen Cole
PLUS
Stephen Cole
Courses Plus Student 15,809 Points
Stephen Cole
Stephen Cole
Courses Plus Student 15,809 Points

I found that, if mouseover is the action type and you hover over the first item, each item moves up and triggers the event.

If you move your mouse around the list and start at the bottom, they will be deleted one at a time.