JavaScript JavaScript and the DOM Traversing the DOM Parent Traversal

David Palmer
David Palmer
4,390 Points

I keep getting the error: "The parent was not an HTML element" with the statement "let ul = removeMe.parentNode;" Why?

The variable removeMe in the statement removeMe = document.querySelector(".remove_me"); should contain the object describing the li element with class "remove_me". I should then be able to traverse to the parent node "ul" with .parentElement property of this object. Where am I going wrong here?

app.js
var removeMe = document.querySelector('.remove_me');
let ul = removeMe.parentElement;
var parent;
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

seth aruby
seth aruby
9,142 Points

Hey David, for this challenge you'll just want to select the element you want to remove; you've done that with your first line of code. Then you need to select the parent element. Then use the removeChild() method to remove the element from its parent, like so:

var removeMe = document.querySelector('.remove_me');
var parent = removeMe.parentNode;
parent.removeChild(removeMe);

Hope this helps

David Palmer
David Palmer
4,390 Points

Thank you, Seth, the tutorial just wanted me to use the parent variable Makes sense now.