JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Kat Stacy
Kat Stacy
33,781 Points

The down button is not working.

I used all of the same code the teacher used but my down button is not working. Help please!

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

1 Answer

Joel Bardsley
Joel Bardsley
31,203 Points

Hi Kat, you're very close and you'll probably kick yourself, but if you look at the documentation for the insertBefore() method, you'll find the following:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

For the 'up' button, you'll notice that prevLi was used as the referenceNode. Hopefully you'll now be able to see where you've gone wrong on the 'down' button!

Kat Stacy
Kat Stacy
33,781 Points

Thank you Joel. I was able to figure it out. There was a problem with the HTML.