javascript - parentElemenst 和 parentNode 无法从列表中删除项目

Question

在我的反应项目中，我的目的是在单击垃圾桶图标时删除项目。我尝试使用or来访问li元素，但是当我单击垃圾桶按钮时，控制台会向我显示不同的父元素。有时向我展示，但有时。我不明白这就是为什么parentNodeparentElementsliicons div

输出是这样的（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

您可以传递要删除的项目的 ID。

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