如何实现点击按钮逐个显示图片后再依次移除的功能？

这需求挺接地气的，本质就是先按顺序把所有图片都添加上，之后再按原添加顺序逐个移除，对吧？我给你写个直观的实现，代码直接就能复用，逻辑也容易理解：

第一步：HTML结构 #

先搭好基础的按钮和图片容器，容器用flex布局方便图片横向排列，你也可以改成自己需要的样式：

<button id="displayBtn">Display</button>
<div id="imageContainer" style="display: flex; gap: 12px; margin-top: 20px;"></div>

第二步：JavaScript核心逻辑 #

核心思路是用一个计数器跟踪点击次数，根据次数判断当前该执行「添加图片」还是「移除图片」操作：

// 替换成你自己的图片地址列表，数量不限
const imageList = [
  'https://via.placeholder.com/160?text=图1',
  'https://via.placeholder.com/160?text=图2',
  'https://via.placeholder.com/160?text=图3'
];

// 获取DOM元素
const displayBtn = document.getElementById('displayBtn');
const imgContainer = document.getElementById('imageContainer');

// 记录点击次数，用来区分操作阶段
let clickTimes = 0;

displayBtn.addEventListener('click', () => {
  const totalImgs = imageList.length;

  // 前totalImgs次点击：依次添加图片
  if (clickTimes < totalImgs) {
    const newImg = document.createElement('img');
    newImg.src = imageList[clickTimes];
    newImg.alt = `图片${clickTimes + 1}`;
    // 可以加一些图片样式，比如固定尺寸
    newImg.style.width = '160px';
    newImg.style.height = '160px';
    imgContainer.appendChild(newImg);
    clickTimes++;
  }
  // 接下来的totalImgs次点击：按添加顺序逐个移除
  else if (clickTimes < totalImgs * 2) {
    // 计算要移除的图片索引：clickTimes减去总图片数，就是最早添加的那个位置
    const removeIndex = clickTimes - totalImgs;
    const targetImg = imgContainer.children[removeIndex];
    if (targetImg) {
      imgContainer.removeChild(targetImg);
    }
    clickTimes++;
  }
  // 可选：完成一轮添加+移除后，重置计数器实现循环操作
  else {
    clickTimes = 0;
    // 如果需要清空容器重新开始，解开下面这行注释
    // imgContainer.innerHTML = '';
  }
});

逻辑说明 #

1. 添加阶段：前3次点击（对应你的3张图片），每次创建一个<img>元素，设置好地址和属性后添加到容器里，同时计数器递增；
2. 移除阶段：第4到6次点击，每次移除容器里的第clickTimes - 3个元素——比如第4次点击时clickTimes=3，减去3得到0，就是移除第一个添加的图片；第5次clickTimes=4，减去3得到1，移除第二个图片，以此类推；
3. 循环重置：当点击次数达到6次（3次添加+3次移除）后，计数器重置为0，再次点击就会重新开始添加图片（如果不需要循环，直接删掉最后那个else块就行）。

这个方案的好处是不管你有几张图片，只要修改imageList数组的内容，逻辑会自动适配，不用改核心代码～

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