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 JavaScript and the DOM (Retiring) Traversing the DOM Getting the First and Last Child

Isra Teneda
Isra Teneda
10,734 Points
Posted by Isra Teneda
Isra Teneda
10,734 Points

My solution for the challenge

In the top, I changed const to let because the 'li' list will change.

let firstListItem = listUl.firstElementChild;
let lastListItem = listUl.lastElementChild;

After the for loop to add buttons, I hid the first and last item.

for (let i = 0; i < lis.length; i += 1) {
  attachListItemButtons(lis[i]);
}

firstListItem.firstElementChild.style.visibility = 'hidden';
lastListItem.querySelector('.down').style.display = 'none';

I created an event for the listDiv.

listDiv.addEventListener('click', () => {
  firstListItem = listUl.firstElementChild;
  lastListItem = listUl.lastElementChild;
  firstListItem.firstElementChild.style.visibility = 'hidden';
  lastListItem.querySelector('.down').style.display = 'none'; 
  for (let i = 1; i < lis.length - 1; i += 1) {
    lis[i].firstElementChild.style.visibility = 'visible';
    lis[i].querySelector('.down').style.display = 'block';
  }
});
Diane Leigh
Diane Leigh
16,813 Points
Diane Leigh
Diane Leigh
16,813 Points

Nice job! If you add an "IF statement" at the top of your listDiv event, if (event.target.tagName == 'BUTTON') { The buttons wont reappear when you click in the input box.

Isra Teneda
Isra Teneda
10,734 Points
Isra Teneda
Isra Teneda
10,734 Points

Diane, you're right thanks.

Alexander Khant
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexander Khant
Full Stack JavaScript Techdegree Student 17,051 Points
Alexander Khant
.a{fill-rule:evenodd;}techdegree
Alexander Khant
Full Stack JavaScript Techdegree Student 17,051 Points

Awesome solution! A small addition to it. I guess, simply by moving these 2 lines below the for loop will do the job:

firstListItem.firstElementChild.style.visibility = 'hidden';
lastListItem.querySelector('.down').style.display = 'none';

Since the listDiv event listener updates all the buttons to a default state, then having these 2 lines after the loop will always hide 'up' and 'down' buttons.

1 Answer

Justin folley
Justin folley
1,227 Points
Justin folley
Justin folley
1,227 Points

Here what is the difference between visibility and display property... can't we use display = 'none' instead of visibility = 'hidden'..??

Why it changes the button layout when we use display = 'none ' and display = 'block' instead of visibility property?