如何通过点击按钮实现图片删除功能？

原生JavaScript场景 #

直接通过DOM操作移除图片元素即可：

<img id="targetImg" alt="image" src="https://image.png"/>
<button onClick="removeImage()">X</button>

<script>
function removeImage() {
  const imgElement = document.getElementById('targetImg');
  if (imgElement) {
    imgElement.remove();
  }
}
</script>

React框架场景 #

推荐用状态控制图片的显示/隐藏，更符合React的数据流逻辑：

import { useState } from 'react';

function ImageWrapper() {
  const [isImageVisible, setIsImageVisible] = useState(true);

  const removeImage = () => {
    setIsImageVisible(false);
  };

  return (
    <>
      {isImageVisible && <img alt="image" src="https://image.png"/>}
      <button onClick={removeImage}>X</button>
    </>
  );
}

另外你原代码里有个小问题：onClick={() => removeImage} 只是引用了函数但没有执行，正确写法应该是 onClick={() => removeImage()}，如果不需要额外参数，也可以直接写 onClick={removeImage}。

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