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

Angel Avendaño
Angel Avendaño
5,012 Points

My solution using: firstElementChild, nextElementSibling, lastElementChild and previousElementSibling

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;

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);
}

// Hide first Up button
function firstUpButton(){
  let firstUp = listUl.firstElementChild.firstElementChild;
  firstUp.style.visibility = "hidden";
}

// Hide last Down button
function lastDownButton(){
  let lastDown = listUl.lastElementChild.firstElementChild.nextElementSibling;
  lastDown.style.visibility = "hidden";
}

// Show previous down button
function showPrevDownButton(){
  let prevDownButton = listUl.lastElementChild.previousElementSibling.firstElementChild.nextElementSibling;
  prevDownButton.style.visibility = "visible";
}

// Show next up button
function showNextUpButton(){
  let nextUpButton = listUl.firstElementChild.nextElementSibling.firstElementChild;
  nextUpButton.style.visibility = "visible";
}


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);
        showNextUpButton();
        firstUpButton();
        showPrevDownButton();
        lastDownButton();
      }
    }
    if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
        showPrevDownButton();
        lastDownButton();
        showNextUpButton();
        firstUpButton();
      }
    }
  }
});

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 = '';
  showPrevDownButton();
  lastDownButton();
  showNextUpButton();
  firstUpButton();
});


firstUpButton();
lastDownButton();
eslam said
eslam said
Pro Student 6,733 Points

it's impossible to read the code like that please Wrap your code with 3 backticks (```) on the line before and after

Itzhak Dangoor
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

Hi Angel, I tried your code, it's not working fully. please check when you remove item, up and down when you added an item ans so on. I got the same issues, looking for lead ideas.

Thank you

Angel Avendaño
Angel Avendaño
5,012 Points

Itzhak Dangoor Thank you for your observation, I have tried and we have to put these functions:

  • firstUpButton();
  • lastDownButton();

when you remove a button.

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);
      firstUpButton();
      lastDownButton();
    }