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

Modou Sawo
Modou Sawo
13,128 Points

I get a TypeError when I try to remove the list items using parentNode & event.target by clicking....

I get this message saying, "Uncaught TypeError: Cannot read property 'removeChild' of undefined" ==> pointing at the ul.removeChild(li); line 15.

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button id="toggleList">Hide list</button>
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="decription">Change list description</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
      <input type="text" class="addItemInput">
      <button class="addItemButton">Add item</button>
      <button class="removeItemButton">Remove last item</button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Here's my JS code:

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


listDiv.addEventListener('click', (event) => {
  if (event.target.tagName == 'LI') {
    let li = event.target;
    let ul = event.parentNode;
    ul.removeChild(li);
  }
});

1 Answer

Mikis Woodwinter
Mikis Woodwinter
44,912 Points

Hey Modou,

Your reference to the unordered list is incorrect. The unordered list is the parent node of the list item — not the parent node of the Event object. Try const ul = li.parentNode. That'll make it work for ya.

Modou Sawo
Modou Sawo
13,128 Points

Hi Mikis, Thanks man! It worked.

While here, can you please look at line 51, I get a "Uncaught TypeError: Cannot read property 'addEventListener' of null":

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

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
});
Mikis Woodwinter
Mikis Woodwinter
44,912 Points

You're welcome sir. You've probably figured it out by now but the reason that addEventListener isn't attaching to descriptionButton is because you have a typo: in your HTML, you spelled the button's class-name wrong. Fix that and it'll work ;)