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

shirshah sahel
shirshah sahel
10,034 Points

My add item button and Remove item button are not working.

Can someone please take a look at my code that why my buttons are not workings?

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.addEventList('click', (event) => {
  if(event.target.tagName == 'BUTTON'){
   let li= event.target;
    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.value = '';
});

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

2 Answers

Steven Parker
Steven Parker
171,904 Points

Line 11 contains a reference to a non-existing function:

listUl.addEventList('click', (event) => {

But you probably intended it to be:

listUl.addEventListener('click', (event) => {
shirshah sahel
shirshah sahel
10,034 Points

Thanks Parker, what a crazy mistake.