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 Using parentNode to Traverse Up the DOM

Brian Patrick
PLUS
Brian Patrick
Courses Plus Student 2,770 Points

Creating the listUl constant still removes all list items on button click.

I have typed and retyped this from the video and it still removes all list items on any button click.

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 removeItemButton = document.querySelector('button.removeItemButton');



listUl.addEventListener('click', (event) =>{
  if(event.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    ul.removeChild(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.vaue = '';
});


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

removeItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.querySelector('li:last-child');
  ul.removeChild(li);
});

1 Answer

Steven Parker
Steven Parker
231,271 Points

I had to make up some HTML to test this with, but it seemed to perform as expected, removing only the last item on each click of the "remove" button.

If you're seeing different behavior, please supply the rest of the code (the HTML part). Or better yet, make a snapshot of your workspace and post the link to that.

Steven Parker
Steven Parker
231,271 Points

The issue turns out to be in the HTML code. The buttons should be inside the list items, but right now they are placed between list items. By HTML rules, a list ("ol" or "ul") should only have list items ("li") as direct children.

The script code will operate as expected once the HTML is corrected.

Brian Patrick
Brian Patrick
Courses Plus Student 2,770 Points

That's interesting because this is pulled directly from the workspace from the exercise.

Steven Parker
Steven Parker
231,271 Points

I don't think the workspace code initially had buttons, but you add them when you follow along with the video.

At about 03:25 in the video, the buttons are added inside the list items.