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) Traversing the DOM Getting the First and Last Child

Vic Mercier
Vic Mercier
3,276 Points
Posted by Vic Mercier
Vic Mercier
3,276 Points

Challenge with firstChild and lastChild

I don't understand the challenge

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Which challenge? The button links to a video. Please provide a link to the actual challenge page.

Also, please show any code you have done so far, and elaborate a bit more about what problem you are having with the challenge.

Vic Mercier
Vic Mercier
3,276 Points
Vic Mercier
Vic Mercier
3,276 Points

const removeItemInput = document.querySelector("input.removeInput"); const toggleList = document.getElementById("togglelist"); const listDiv = document.querySelector(".list"); const listDivUl = document.querySelector("ul"); const myInput = document.querySelector("input.description"); const myP = document.querySelector("p.description"); const button = document.querySelector("button.description"); const addItemInput = document.querySelector("input.addItemInput"); const addItemButton = document.querySelector("button.addItemButton"); const removeButton = document.querySelector("button.removeItemButton"); const lis = listDivUl.children; function attachListItemsButton(li){ //Up button let up = document.createElement("button"); up.className = "up"; up.textContent = "up";

li.appendChild(up); //Down button let down = document.createElement("button"); down.className = "down"; down.textContent = "down"; li.appendChild(down); //Remove button let remove = document.createElement("button"); remove.className = "remove"; remove.textContent = "remove"; li.appendChild(remove); }

listDivUl.addEventListener("click", (event) => { if(event.target.tagName == "BUTTON"&& event.target.className == "remove"){ let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } }); listDivUl.addEventListener("click", (event) => { if(event.target.tagName == "BUTTON" && event.target.className == "up"){ let li = event.target.parentNode; let previousLi = li.previousElementSibling; let ul = li.parentNode;

if(previousLi ){ ul.insertBefore(li, previousLi);

} } }); listDivUl.addEventListener("click", (event) => { if(event.target.tagName == "BUTTON" && event.target.className == "down"){ let li = event.target.parentNode; let nextLi = li.nextElementSibling; let ul = li.parentNode; if(nextLi){ ul.insertBefore(nextLi, li); } } });

toggleList.addEventListener("click", () =>{ if(listDiv.style.display == "none"){ toggleList.textContent = "Hide list"; listDiv.style.display = "block"; }else{ toggleList.textContent = "Show list"; listDiv.style.display = "none"; }
});

button.addEventListener("click", () => { myP.textContent = myInput.value+" : " ; myInput.value = ""; });

addItemButton.addEventListener("click", () => {

let ul = document.getElementsByTagName("ul")[0]; let li = document.createElement("li"); li.textContent = addItemInput.value; let firstChild = ul.firstElementChild;

attachListItemsButton(li);

ul.appendChild(li);

addItemInput.value = "";
});

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

When posting code, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Or watch this video on code formatting.

But for the challenge, please include a link to the challenge page.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Here's a few hints.

Remember that every time an item is moved, you need to check if it is now the edge item and remove the appropriate button if so.

And be aware that if you remove the "up" button from the top item (and I assume the "down" button from the bottom), you'll need to recreate them if those items are moved using the remaining button. You'll also need to recreate them if another item is moved to replace them at the top or bottom of the list.

As an alternative enhancement, I would recommend just setting the button's "disabled" property, which will change the visual appearance in a way most users will recognize as meaning "not active". Then you can just clear that property when the item is moved or another one is moved to take its place.

Vic Mercier
Vic Mercier
3,276 Points
Vic Mercier
Vic Mercier
3,276 Points

I've got the challenge but instead using the disabled property, I did what I wanted to do and after a few attemps I got it!

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I was hoping to save you a bit of work, but if you went for the "whole enchilada" and did it, good for you! :+1:

Happy coding!