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 trialBrian Patrick
Courses Plus Student 2,770 PointsCreating the listUl constant still removes all list items on button click.
I have typed and retyped this from the video and it still removes all list items on any button click.
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');
listUl.addEventListener('click', (event) =>{
if(event.target.tagName == 'BUTTON') {
let li = event.target.parentNode;
let ul = li.parentNode;
ul.removeChild(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'
}
});
descriptionButton.addEventListener('click', () => {
descriptionP.innerHTML = descriptionInput.value;
descriptionInput.vaue = '';
});
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
ul.appendChild(li);
addItemInput.value = '';
});
removeItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.querySelector('li:last-child');
ul.removeChild(li);
});
1 Answer
Steven Parker
231,236 PointsI had to make up some HTML to test this with, but it seemed to perform as expected, removing only the last item on each click of the "remove" button.
If you're seeing different behavior, please supply the rest of the code (the HTML part). Or better yet, make a snapshot of your workspace and post the link to that.
Brian Patrick
Courses Plus Student 2,770 PointsBrian Patrick
Courses Plus Student 2,770 Pointshttps://w.trhou.se/7y8sj74v56
If I click the remove button it removes all list items.
Steven Parker
231,236 PointsSteven Parker
231,236 PointsThe issue turns out to be in the HTML code. The buttons should be inside the list items, but right now they are placed between list items. By HTML rules, a list ("ol" or "ul") should only have list items ("li") as direct children.
The script code will operate as expected once the HTML is corrected.
Brian Patrick
Courses Plus Student 2,770 PointsBrian Patrick
Courses Plus Student 2,770 PointsThat's interesting because this is pulled directly from the workspace from the exercise.
Steven Parker
231,236 PointsSteven Parker
231,236 PointsI don't think the workspace code initially had buttons, but you add them when you follow along with the video.
At about 03:25 in the video, the buttons are added inside the list items.