JavaScript JavaScript and the DOM Traversing the DOM Parent Traversal

Marie Josée Laporte
Marie Josée Laporte
8,188 Points

Challenge Parent Traversal

Hi I wonder what is wrong with my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Parent Traversal</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <ul>
            <li>Hello</li>
            <li>Hi</li>
            <li class="remove_me">Good bye!</li>
            <li>Howdy</li>
        </ul>
        <script src="app.js"></script>
    </body>
</html>

What my problem is this second task: Remove the removeMe element from the parent element.

This is what I tried:

const removeMe = document.querySelector('.remove_me');
let parent = removeMe.parentNode;

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

What did I do wrong?

app.js
const removeMe = document.querySelector('.remove_me');
let parent = removeMe.parentNode;

parent.addEventListener('click', (event) => {
  if (event.target.tagName == 'REMOVEME') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    ul.removeChild(li);
  }
});
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Parent Traversal</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <ul>
            <li>Hello</li>
            <li>Hi</li>
            <li class="remove_me">Good bye!</li>
            <li>Howdy</li>
        </ul>
        <script src="app.js"></script>
    </body>
</html>

2 Answers

Ella Ruokokoski
Ella Ruokokoski
20,694 Points

It looks like you have over-complicated this a bit. All you need to do is to use the removeChild() method

parent.removeChild(removeMe);
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

yes of course! much simpler... IT's not the first time I over-complicate thing! Thank you very much...