如何使用按钮同时添加和删除图像？

在前端开发中，你可以使用按钮实现同时添加和删除图像的功能。以下是一个基本的实现方式：

HTML 结构：

<button id="toggleBtn">添加/删除图像</button>
<div id="imageContainer"></div>

CSS 样式（可根据需求自行调整）：

#imageContainer img {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

JavaScript 代码：

// 获取按钮和图像容器元素
const toggleBtn = document.getElementById('toggleBtn');
const imageContainer = document.getElementById('imageContainer');

// 定义图片 URL 数组，可以根据需要修改或扩展
const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];

// 初始化添加图像
imageUrls.forEach(url => {
  const img = document.createElement('img');
  img.src = url;
  imageContainer.appendChild(img);
});

// 添加/删除图像的按钮点击事件处理程序
toggleBtn.addEventListener('click', () => {
  // 检查图像容器是否为空
  if (imageContainer.children.length === 0) {
    // 图像容器为空，添加图像
    imageUrls.forEach(url => {
      const img = document.createElement('img');
      img.src = url;
      imageContainer.appendChild(img);
    });
  } else {
    // 图像容器非空，删除图像
    while (imageContainer.firstChild) {
      imageContainer.removeChild(imageContainer.firstChild);
    }
  }
});

上述代码中，首先通过按钮的点击事件来切换添加和删除图像的功能。当图像容器为空时，点击按钮会将预定义的图片 URL 数组中的每个 URL 对应的图像添加到图像容器中。而当图像容器非空时，点击按钮会将图像容器中的所有图像删除。

请注意，上述代码仅为一个基本示例，实际应用中可能需要根据具体需求进行相应的调整和扩展。

腾讯云相关产品和产品介绍链接地址：