Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

I have gotten task 1 to work several different ways, but every time I get back to task three my task 1 no longer works.

I'm sure I'm removing the elements incorrectly, but it's hard to troubleshoot that task without understanding how task 1 mysteriously breaks.

I would appreciate someone helping me to understand where I'm going wrong here.

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;
let firstListItem;
myList = document.getElementsByTagName("ul")[0];
firstListItem = myList.querySelector("li");
myList.removeChild("li");

2 Answers

Steven Parker
Steven Parker
215,939 Points

The argument for removeChild is an element, not a selector string.

And in task 2, you have already selected the element and saved it. So for task 3 you could write:

myList.removeChild(firstListItem);

Using the wrong kind of argument causes a syntax error for the entire program, so the challenge says "Task 1 is no longer passing." because it checks task 1 again first.

Here I'm passing in an element, but task 1 breaks again. How does my code work for task 1 and 2, but not 3?

let myList; let firstListItem;

myList = document.getElementsByTagName("ul")[0];

firstListItem = myList.querySelector("li");

myList.removeChild("li");

Kevin Korte
Kevin Korte
28,109 Points

Hey Robert, take a good look again at what Steven is saying. Also, take note that is says "first list item element". You'll need to select your list item in a similar way you did your unordered list in step 1. Once you have the first list item in your variable, than call that in your removeChild method, not the string, like Steven showed.

If you do that, it'll pass you.

Here I'm passing in an element, but task 1 breaks again. How does my code work for task 1 and 2, but not 3?

let myList; let firstListItem; myList = document.getElementsByTagName("ul")[0]; firstListItem = myList.querySelector("li"); myList.removeChild("li");

Steven Parker
Steven Parker
215,939 Points

"li" is a selector string.

It works as an argument to querySelector, but not for removeChild. Take another look at my answer for an example of a valid call to removeChild.