Javascript help function to hide each listem independently

Question

Can someone please help me with a function to hide a list element, one by one, when clicking on it? I only got it to work but for one single element, I am not sure how it would go for all of them.

Suppose I have a list of 5 elements. When i click on element 1, it dissapears. If I click on element two, it also dissapears and so on.

I would like it to do on javascript vanilla only

This is that I've tried so far:







  Coffee
  Coffee 2
  Coffee 3

user_10780861 · Answer

You can simply do this by passing event parameter into a click handler function.

When you define your html like this onclick="onListItemClick(event)", Javascript automatically sends the event object into your function.

Event object has many properties inside of it. But all you are concerned with is the event.target which is the element that you clicked on.

Then you can easily manipulate any part of that html element.

function onListItemClick(event) {
  event.target.style.visibility = 'hidden';
}





  
    Coffee 1
    Coffee 2
    Coffee 3

user_12415287 · Answer

Don't use inline HTML event attributes. Best practice is delegation. Add a class to your ul so that you only need one eventListener.

document.querySelector(".unordered-list").addEventListener("click", function(e) {
  if (e.target.classList.contains("id1")) {
    e.target.style.opacity = 0;
  }
});


  Coffee
  Coffee 2
  Coffee 3

Javascript help function to hide each listem independently

2 Answers