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

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,809 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

Diane, you're right thanks.

Alexander Khant
Alexander Khant
Full Stack JavaScript Techdegree Student 17,049 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

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?