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

Olive Bamurange
Olive Bamurange
5,174 Points
Posted by Olive Bamurange
Olive Bamurange
5,174 Points

Finally, remove the <li> element stored in firstListItem from the DOM.

I spent more than two hours but, I couldn't figured this challenge. Would someone help on this . Thank you !

app.js 
let myList = document.querySelector('ul');
let firstListItem = document.querySelector('li:first-child');
myList.removeChild(firstListItem);
let FirstListItem = document.querySelector("li");
FirstListItem.removeChild(li);
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>

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Your third line accomplishes the task 3 objective. The next two lines are doing something that's not asked for by the challenge (and throws off the testing mechanism).

But while we're here, let's take another look at task 2. The instructions say "select the <li> with the ID first ..." The selector used was 'li:first-child', which selects the list item that is the first child of its parent. Just by luck, it happened to also be the one with the id of "first". But a better selector would have been '#first', which would have selected the element using the id no matter where it was located in the list.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Task 3 says to "remove the <li> element stored in firstListItem from the DOM.", which is exactly what the 3rd line does. Note that it's only asking for one element to be removed. And I can confirm that the first 3 lines of code shown above will pass all tasks of the challenge when used by themselves.

Adding the other two lines prevents it from working since the final line contains a reference to an undefined identifier.

Olive Bamurange
Olive Bamurange
5,174 Points
Olive Bamurange
Olive Bamurange
5,174 Points

Actually the 3task is asking to remove (li)elements stored in firstListItems from the Dom. That's my understanding. 3rd line doesn't solve the issue. I may not be right to this challenge. It looks strange to me