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