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

Olive Bamurange
Olive Bamurange
Full Stack JavaScript Techdegree Student 4,568 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
179,882 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
179,882 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
Full Stack JavaScript Techdegree Student 4,568 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