JavaScript JavaScript and the DOM Traversing the DOM Getting the First and Last Child

Birthe Vandermeeren
Birthe Vandermeeren
17,139 Points

My solution to Guil's challenge of hiding the non-working buttons

I've created a function hideNonWorkingButtons that first loops through all buttons in the list to set their visibility to "visible".

Then, it sets the visibility of the up button of the first item in the list and the visibility of the down button of the last item in the list to "hidden".

I'm calling this function after all the buttons are created so the right buttons are hidden on the start screen. Then I'm calling it again at the end of the listUl.addEventListener, so it hides the correct buttons when one of the up, down, or remove buttons are clicked. And again at the end of the addItemButton.addEventListener, so it hides the correct buttons when an item is added to the list.

Hope this makes sense. If you have any questions, I'd be happy to clarify.

Here's my the link to my workspace: workspace with function to hide the non-working buttons

Mindaugas Kunevicius
Mindaugas Kunevicius
7,403 Points

Nice! Just you don't need to define let allListItems on line 39 as you already have const lis on line 12. And it itches for me to somehow use the defined const firstListItem and const lastListItem in the solution, but I didn't manage yet as well...

I like your solution, but I have simplified your function a bit and added comments: My Workspace

Update: I found the way to use firstElementChild and lastElementChild to traverse instead of counting items in the array :) Updated Workspace

Birthe Vandermeeren
Birthe Vandermeeren
17,139 Points

You're right, Mindaugas, about the allListItems and lis, and right, firstElementChild, smart. Thanks for commenting!