单击其中的按钮时如何删除父 div？

Question

我有一个按钮，

<div
    key={index}
    className='flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm'
>
    <span className="pr-2">{tag}</span>
    <button>
        <XCircleIcon className="h-4" />
    </button>
</div>

看起来像这样，

我正在尝试删除 整个

元素 当 元素 被点击。我该怎么做？

我像这样给按钮添加了一个事件，

<div
    key={index}
    className='flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm'
>
    <span className="pr-2">{tag}</span>
    <button onClick={handleRemoveClick}>
        <XCircleIcon className="h-4" />
    </button>
</div>

并传递了下面的handleRemoveClick函数，

function handleRemoveClick(event: MouseEvent<HTMLButtonElement>) {
        const target = event.target as SVGPathElement
        const removingText = target.parentElement!.parentElement!.parentElement!.children.item(0)!.innerHTML
        setTags(prev => (prev?.filter(tag => tag !== removingText)))
}

但这只有在我单击按钮的 白色部分 而不是 红色部分 时才有效。然后我环顾四周，发现 event.target 会根据我点击按钮的位置而变化。我想到的解决方案是添加一个 if else 来确定我点击的位置。

那么，有更好的方法吗？

Answer 1

这是一个在点击时隐藏按钮的简单解决方案

export default function App() {
  const [hideButton, setHideButton] = useState(false);

  return (
    <div className="App">
      {hideButton ? null : (
        <div
          key={index}
          className="flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm"
          onClick={() => setHideButton(true)}
        >
          <span className="pr-2" onClick={(e) => e.stopPropagation()}>{tag}</span>
          <button>
            <XCircleIcon className="h-4" />
          </button>
        </div>
      )}
    </div>
  );
}