parentElemenst and parentNode are doesn't work to remove item from list

Question

In my react project, my purpose is removing item when I click the trash icon. I tried to reach li elements using parentNode or parentElements but when I do this whenever I click the trash button console shows me different parent elements. Sometimes shows me li but sometimes icons div. I couldn't understand thats why

output is like that (img)

const removeItem = (item) => {
    const liITem = item.target.parentNode.parentNode.parentNode;
    console.log(liITem);
    //liITem.remove();
  };

  return (
    <Container>
      <ToDoForm onSubmit={addTodo} />
      <ul className="items">
        {todos.map((todo) => (
          <li className="item" key={todo.id}>
            {todo.text}
            <div className="icons">
              <button className="icon">
                <AiFillEdit />
              </button>
              <button className="icon">
                <BsFillTrashFill onClick={removeItem} />
              </button>
            </div>
          </li>
        ))}
      </ul>
    </Container>
  );

Answer 1

You can pass the id of the item you want to remove.

const removeItem = (id) => {
      const todosUpdated = todos.filter((elt) => elt.id != id )
      setTodos(todosUpdated )
  };

  return (
    <Container>
      <ToDoForm onSubmit={addTodo} />
      <ul className="items">
        {todos.map((todo) => (
          <li className="item" key={todo.id}>
            {todo.text}
            <div className="icons">
              <button className="icon">
                <AiFillEdit />
              </button>
              <button className="icon">
                <BsFillTrashFill onClick={() => removeItem(todo.id)} />
              </button>
            </div>
          </li>
        ))}
      </ul>
    </Container>
  );