# Spot the bug - #110: Todo List

**URL:** <https://forum.kirupa.com/t/spot-the-bug-110-todo-list/682984>\
**Category:** web dev\
**Created:** [August 8, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-110-todo-list/682984 "2026-08-08T07:00:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [August 8, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-110-todo-list/682984/1 "2026-08-08T07:00:10Z")

</div>

My todo list deletes the wrong item every single time, help

```js
const list = document.getElementById('todoList');

function addItem(text) {
  const li = document.createElement('li');
  li.textContent = text;

  const removeBtn = document.createElement('button');
  removeBtn.textContent = 'Remove';
  removeBtn.addEventListener('click', () => {
    list.removeChild(li.parentElement);
  });

  li.appendChild(removeBtn);
  list.appendChild(li);
}

addItem('Buy milk');
addItem('Walk dog');
addItem('Write code');

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [August 9, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-110-todo-list/682984/2 "2026-08-09T07:00:20Z")

</div>

`removeChild(li. parentElement)` removes the list itself, not the `li`. Should just be `list. removeChild(li)`, since `list` and `li` are already in scope from the closure.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [August 9, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-110-todo-list/682984/3 "2026-08-09T08:00:18Z")

</div>

**Spot the Bug answer:** The click handler removes li.parentElement (the list itself) instead of the li item that contains the clicked button

**The fix:**

```js
list.removeChild(li);

```

**Why:**  
li.parentElement refers to the ul (list), not the individual todo item, so calling removeChild on it tries to remove the whole list from its parent instead of removing the specific li. The handler should remove li directly since that is the element containing the button that was clicked.

**First-answer leaderboard**

1. @kirupa - 3 (firsts) 🏆
2. @emmawalter5 - 1 (first)