点击onClick无法删除React元素，报remove is not a function如何解决

你遇到的remove is not a function报错，是因为React的onClick事件回调默认传入的第一个参数是事件对象，而非DOM元素，事件对象本身不存在remove方法。

解决方案 #

React不推荐直接操作原生DOM，建议用状态驱动渲染的方式实现删除效果，具体实现步骤如下：

1. 引入useState维护需要渲染的卡片列表状态

import { useState } from 'react';

// 组件内定义状态，初始对应3个卡片
const [itemList, setItemList] = useState([
  { id: '1' },
  { id: '2' },
  { id: '3' }
]);

2. 重写删除逻辑，通过更新状态过滤掉要删除的元素

const onRemoveItem = (targetId) => {
  // 过滤掉id匹配的元素，触发重渲染自动移除对应卡片
  setItemList(prevList => prevList.filter(item => item.id !== targetId));
};

const removeStyle = {
  position: "absolute",
  left: "11px",
  top: 0,
  cursor: "pointer"
};

3. 渲染部分改成遍历状态列表生成元素，不要硬编码三个div

return (
  <ResponsiveGridLayout layouts={layout}>
    {itemList.map(item => (
      <div key={item.id}>
        <NewvsReturnVisitors />
        <span 
          className="remove" 
          style={removeStyle} 
          onClick={() => onRemoveItem(item.id)}
        >
          x
        </span>
      </div>
    ))}
  </ResponsiveGridLayout>
);

如果你确实需要直接操作DOM（不推荐），可以调整原方法如下：

const onRemoveItem = (e) => {
  // e.currentTarget是点击的span元素，父元素是要删除的卡片div
  const element = e.currentTarget.parentElement;
  if (element) {
    element.remove();
  }
};

这种方式可能会导致React虚拟DOM和真实DOM不同步，后续出现渲染异常，仅临时调试可用。

内容的提问来源于stack exchange，提问作者yongchang