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

Posted by Artem K
Artem K
2,078 Points

How can I realize this behavior to hide up-button in top and down button in bottom from the second part of the video?

How can I realize this behavior to hide up-button in top and down button in bottom from the second part of the video? https://teamtreehouse.com/library/getting-the-first-and-last-child

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;


function attachListItemButtons(li) {
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'Up';
  li.appendChild(up);

  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'Down';
  li.appendChild(down);  

  let remove = document.createElement('button');
  remove.className = 'remove';
  remove.textContent = 'Remove';
  li.appendChild(remove);
}

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

listUl.addEventListener('click', (event) => {
  if (event.target.tagName == 'BUTTON') {
    if (event.target.className == 'remove') {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    }
    if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
        ul.insertBefore(li, prevLi);
      }
    }  
    if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
      }
    } 
  }
});

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
});

2 Answers

Kelly Musgrove
Kelly Musgrove
3,504 Points
Kelly Musgrove
Kelly Musgrove
3,504 Points

Hi Artem, I know it's been a while since you posted this -- hopefully you've figured it out! If not, here's the code I came up with. You'd want to create a function that loops through the list items, checks if the list item is first or last child, and then traverses the DOM from there, in order to hide or show the corresponding buttons. I know that sounds super confusing, so here's the code in it's entirety.

const toggleList = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const listItems = document.querySelectorAll('li');
const lis = listUl.children;


//create a function to hide the first up button and the last down button
function hideAndShowButtons() {
  let firstItem = listUl.firstElementChild;
  let lastItem = listUl.lastElementChild;

  for (let i = 0; i < listUl.children.length; i++) {
    if (listUl.children[i] === firstItem) {
      listUl.children[i].firstElementChild.style.visibility = 'hidden';
    }
    if (listUl.children[i] === lastItem) {
      listUl.children[i].firstElementChild.nextElementSibling.style.visibility = 'hidden';
    }
    if (listUl.children[i] !== lastItem) {
      listUl.children[i].firstElementChild.nextElementSibling.style.visibility = 'visible';
    }
    if (listUl.children[i] !== firstItem) {
      listUl.children[i].firstElementChild.style.visibility = 'visible';
    }
  }
}

function attachListItemButtons(li) {
  let up = document.createElement('button');
   up.className = 'up';
   up.textContent = 'Up';
   li.appendChild(up);

  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'Down';
  li.appendChild(down);

  let remove = document.createElement('button');
  remove.className = 'remove';
  remove.textContent = 'Remove';
  li.appendChild(remove);

}

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

listUl.addEventListener('click', (event) => {
   if (event.target.tagName == 'BUTTON') {
    if (event.target.className === 'remove') {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
      hideAndShowButtons()
    }
    if (event.target.className === 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
      ul.insertBefore(li, prevLi); 
      }
      hideAndShowButtons()
    }
    if (event.target.className === 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
      ul.insertBefore(nextLi, li);
      }
    }
     hideAndShowButtons();
   }
  });

toggleList.addEventListener('click', () => {
  if ( listDiv.style.display === 'none' ) {
    toggleList.textContent = 'Hide List';
    listDiv.style.display = 'block'
  } else {
    toggleList.textContent = 'Show List';
    listDiv.style.display = 'none';
  }
});

  descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':'; 
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ul = document.querySelectorAll('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  hideAndShowButtons();
  addItemInput.value = '';
});

  hideAndShowButtons();
Sergey Pomaraiko
Sergey Pomaraiko
5,572 Points
Sergey Pomaraiko
Sergey Pomaraiko
5,572 Points

Hi. Below my solution for this task.

const listDiv = document.querySelector('.list');
const listUl =  listDiv.querySelector('ul');
const addInputItem = document.querySelector('.addInputItem');
const addItemButton = document.querySelector('.addItemButton');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;

firstListItem.style.backgroundColor = 'lightblue';
lastListItem.style.backgroundColor = 'lightgrey';

function listButtonVisibility(li){
  const upButton = li.firstElementChild;
  const downButton = upButton.nextElementSibling;

  if (li.parentNode.firstElementChild === li)
    upButton.style.visibility = 'hidden';
  else 
    upButton.style.visibility = '';

  if (li.parentNode.lastElementChild === li)
    downButton.style.visibility = 'hidden';
  else 
    downButton.style.visibility = '';
}

function attachListItemButtons(li){
  let up = document.createElement('button');
  let down = document.createElement('button');
  let remove = document.createElement('button');
  up.textContent = 'up';
  up.className = 'up';
  down.textContent = 'down';
  down.className = 'down';
  remove.textContent = 'remove';
  remove.className = 'remove';
  li.appendChild(up);
  li.appendChild(down);
  li.appendChild(remove);
  listButtonVisibility(li);
}


listUl.addEventListener('click', (event) => {
    if(event.target.tagName === 'BUTTON') {
      if(event.target.className ==='remove') {
        let li = event.target.parentNode;
        let ul = li.parentNode;
        ul.removeChild(li);
      }
      if(event.target.className ==='up') {
        let li = event.target.parentNode;
        let prevLi = li.previousElementSibling; 
        let ul = li.parentNode;
        if(prevLi) {
          ul.insertBefore(li, prevLi);
          listButtonVisibility(prevLi);
          listButtonVisibility(li);          
        }
      }
      if(event.target.className ==='down') {
        let li = event.target.parentNode;
        let nextLi = li.nextElementSibling; 
        let ul = li.parentNode;

        if (nextLi) {
          ul.insertBefore(nextLi, li);
          listButtonVisibility(nextLi);
          listButtonVisibility(li);
        }
      }
    }
  });

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addInputItem.value;
  ul.appendChild(li);
  addInputItem.value = '';
  attachListItemButtons(li);
  listButtonVisibility(li.previousElementSibling);
});

[].slice.call(lis).forEach(attachListItemButtons);