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 Kim Dallas
Kim Dallas
11,461 Points

I'm stuck

the last question is confusing me.

app.js 
var myList=document.querySelector ('ul'); 
var firstListItem=document.querySelector ('li');
remove ('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>

2 Answers

Dario Bahena
Dario Bahena
10,697 Points
Dario Bahena
Dario Bahena
10,697 Points 
// first select the ul element. The ul element will contain all of the li elements
// once selected, it is stored in the myList variable
var myList = document.querySelector('ul');

// Since the myList variable contains the elements we will be working with, Select the li element with the id of "first".
// there are many ways to do this. Using querySelector, we query first adding an "#" to the string since it signifies id 
var firstListItem = myList.querySelector('#first');

// now firstListItem variable is referencing the element with the id of #first

// from the variable myList, remove the item firstListItem
myList.removeChild(firstListItem);
Seth L
Seth L
6,212 Points

I used the below, and during the preview it worked the same as your method. However, it wasn't passing the test for the challenge. While your method is significantly simpler, is there anything inherently wrong with the way I attempted to do it?

var myList = document.querySelector('ul');
var firstListItem = document.querySelector('#first');

firstListItem.remove(document.querySelector('li:last-child'));
Dario Bahena
Dario Bahena
10,697 Points
Dario Bahena
Dario Bahena
10,697 Points

I think it may be because they want you to do this task a certain way. That is way they split it up into three parts.

Technically, you could just do this. It may also be that the remove method is rather new and not part of this lesson.

document.querySelector('#first').remove()

document.querySelector('li:last-child') // this line isn't necessary.

Seth L
Seth L
6,212 Points

That makes sense. I got a little confused, and when I was checking documentation I found "remove()".

Its probably the same reason a lot of the earlier parts won't pass you unless you use let or const, but the latter parts will.