Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Removing an Element from the DOM

Posted by Stephen Powers
Stephen Powers
12,091 Points

I've tried approaching this at least 4 different ways, but no luck. What's wrong with my code?

I've done everything I can think of and even went back to review to see if I missed something.

The only feedback I get is "The element has not been removed from the DOM", or "Task 1 has stopped processing".

What's wrong with my code?

index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <ul>
            <li id="first">First Item</li>
            <li id="second">Second Item</li>
            <li id="third">Third Item</li>
        </ul>
        <script src="app.js"></script>
    </body>
</html>
app.js 
let myList = document.querySelector("ul");
let firstListItem = document.getElementById("first");

myList.removeChild(myList.childNodes[0]);

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Well, "childNodes" are often not the same thing as "children", since not all nodes are elements. So you could fix it by using the other property.

But an even easier solution would be to make use of the "firstListItem" already selected from task 2, and pass that as the argument instead.

Stephen Powers
Stephen Powers
12,091 Points
Stephen Powers
Stephen Powers
12,091 Points

Thanks Steven. If I'm understanding correctly, it would be this:

myList.removeChild(firstListItem);

If that's correct, that was my first go to before I started to research alternatives. It just returns "The element has not been removed from the DOM" for some reason.

Stephen Powers
Stephen Powers
12,091 Points
Stephen Powers
Stephen Powers
12,091 Points

Actually, I just tried it again and it worked. Go figure =)