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 Kathryn Notson
Kathryn Notson
25,941 Points

JavaScript and the DOM > Making Changes to the DOM > Removing an Element from the DOM

"3. Remove the list item element stored in firstListItem from the DOM."

I've tried various ways to do the first 2 code challenge questions, but still not able to get the 3rd question.

1st question could be: a. let myList = document.querySelector('ul'); b. let myList = document.getElementByTagName('ul')[0];

2nd question could be: a. let firstListItem = document.getElementById('first'); or b. document.querySelector('li:first-child');

3rd question: ul.removeChild(firstListItem); doesn't work. I get an error message telling me that Task 1 is no longer passing. I tried myList.removeChild(firstListItem); & that didn't work either.

Aha! I figured it out on my own. Hint: use the same type of query for the first 2 questions where you get the first item of the collection.

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.getElementByTagName('ul')[0];
let firstListItem = document.querySelector('li:first-child');
myList.removeChild(firstListItem);

2 Answers

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

Steven Parker:

Yes, syntax is very strict. You can create interesting errors with punctuation marks used as syntax or not camelCasing variables. Some of them would create a funny video show. :-)

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

It looks like you had a typo.

On your first try, you spelled "mylist" (with a lower-case "l") instead of "myList" (with captal "L") on the third line. Applying a method to an undefined variable invalidated the whole script, and it always re-tests task 1 first.

Any method that produces the correct result for tasks 1 and 2 is fine for task 3.

Kathryn Notson
Kathryn Notson
25,941 Points

Steven Parker:

I didn't mean to mistype "myList". I played with the 1st two questions several times, & yes, the code challenge will tell you that more than 1 option is correct for them. It's whether the 1st Task still passes or not when you answer the 3rd question. That's the problem I had.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

I understand. And it was the error on the third line that caused you to get that message. Anytime you introduce a syntax error it makes the previous tasks appear to be invalid to the checker, even if you made no changes to the code done for those tasks.