我可以使用 event.target 来确定 <li> 元素的索引吗？

Question

假设我有一个 <ul></ul> 和一些 <li></li> 元素。我想知道，通过单击 <li> 元素的子元素（我里面有按钮）来获取其索引的最佳方法是什么？在最好的方式下，我的意思是最适合初学者的方式，使用 vanilla JS。伙计们，也许你们有一些想法要分享？

我需要该索引以便稍后从数组中删除相关元素。到目前为止，我所写的内容似乎过于复杂，因为我必须为每个要单击的元素分配 ID。

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)?

只需使用 forEach 即可得到索引，如下所示：

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>

我可以使用 event.target 来确定 <li> 元素的索引吗？

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

javascript

mouseevent

html-lists