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

Posted by Anne Donald
Anne Donald
9,847 Points

Selecting List Items to Delete

Hi There, I thought that I would try and amend the removeItemButton (Javascript and the DOM) and try and get the user to select an item to remove rather than just the last item. I've managed to update the JS so that when the user clicks on an li element the background changes to light grey (and double click to remove) but I just cant seem to get my head around how to get that selected item to be removed.

Any help would really be appreciated... trying to push my boundaries however small :-)

addItemButton.addEventListener('click', function(){
   let ul = document.getElementsByTagName('ul')[0];
   let li = document.createElement('li');

    li.textContent = addItemInput.value;
    ul.appendChild(li);

    addItemButton.value = "";

});

listDiv.addEventListener('click', (e) => {
    if(e.target.tagName == 'LI'){
        e.target.style.backgroundColor = 'lightgrey';
    }

});



listDiv.addEventListener('dblclick', (e) => {
    if(e.target.tagName == 'LI'){
        e.target.style.backgroundColor = '#fff';
    } 
});

removeItemButton.addEventListener('click', function(e){

    if(e.target.tagName == 'LI' && e.target.style.backgroundColor == 'lightgrey'){

        let ul = document.getElementsByTagName('ul')[0];
        let li = document.querySelector('li');
        ul.removeChild(li);
    }


});

I've even tried e.target.removeChild(li); and I think a few other variations? am I missing something really silly?

5 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You didn't show the HTML, but I'm guessing the list items are not inside the remove button as the code shown implies. But if you were to tag each item with a special class when it is marked, then a loop could easily find them all and remove them when the button is clicked:

listDiv.addEventListener("click", e => {
  if (e.target.tagName == "LI") {
    e.target.style.backgroundColor = "lightgrey";  // not needed with CSS
    e.target.classList.add("marked");
  }
});

listDiv.addEventListener("dblclick", e => {
  if (e.target.tagName == "LI") {
    e.target.style.backgroundColor = null;        // not needed with CSS
    e.target.classList.remove("marked");
  }
});

removeItemButton.addEventListener("click", function(e) {
  var marked = listDiv.querySelectorAll("li.marked");
  for (var li of marked) {
    var ul = li.parentNode;
    ul.removeChild(li);
});

Also, if you add this to your CSS, you won't need to explicitly change the background color in the script code:

.marked {
    background-color: lightgrey;
}
Jaspal Singh
Jaspal Singh
13,525 Points
Jaspal Singh
Jaspal Singh
13,525 Points

Hi Anne

You have to follow the traversal rule of javascript to select the parent node so that you can remove the list items. I will tell you the few steps

  1. get the reference of a button by e.terget.tagName == button. 2 then select the parent of button and save it in a variable, let li = e.target.parentNode
  2. now you have to select the parent of Li, let ul = li.parentnode
  3. in the end remove the child, ul.removeChild(li)

thanks

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thanks Jaspal, I did this and when I clicked the remove button the whole page went blank, so it seemed to remove everything..(very strange!) What I have noticed is that the next section in the course is all about traversal.

Thanks again

Anne

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thanks Steven, I'll give that a try tonight :-)

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Just checking — were you ever able to resolve your issue?

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thanks for the reminder, I completely forgot to mark this as the best answer.