JavaScript JavaScript and the DOM Traversing the DOM Using parentNode to Traverse Up the DOM

Brian Patrick
PRO
Brian Patrick
Pro 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
173,522 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
173,522 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
Pro Student 2,770 Points

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

Steven Parker
Steven Parker
173,522 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.