Can I use event.target to determine an index of <li> element?

Question

Suppose i have a <ul></ul> with some number of <li></li> elements. And I wonder, what is the best way to get an index of the <li> element by clicking on its child (I have buttons inside)? Under the best way, I mean the most beginner-friendly, using vanilla JS. Maybe you, guys, have a couple of ideas to share?

I need that index to remove the related element from an array later on. What I've managed to write so far seems overcomplicated, since I have to assign ids to each element I want to click on.

function removeItem(e) {
   if (e.target.classList.contains('removeBtn')) {
      controller.tasks.splice(e.target.id, 1);
      view.renderInput(controller.tasks);
   } 
}
ulEl.addEventListener('click', removeItem);

Answer 1

Suppose i have a <ul></ul> with some number of <li></li> elements. And I wonder, what is the best way to get an index of the <li> element by clicking on its child (I have buttons inside)?

Just use forEach which will give you the index as well like this:

const list = document.querySelectorAll('#someList li');
const btns = document.querySelectorAll('#someList button');

btns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
    console.log(index);
    console.log(list[index]);
  });
});

<ul id="someList">
  <li>A <button>Click Me</button></li>
  <li>B <button>Click Me</button></li>
  <li>C <button>Click Me</button></li>
  <li>D <button>Click Me</button></li>
</ul>