删除最后一张图片后前端未同步消失问题求助

问题根源 #

你的refresh函数存在两个核心问题：

• 当删除最后一张图片后，后端返回的tempList为空，循环代码完全不执行，导致原来显示图片的img#1仍保留旧的Base64地址，没有被重置为占位图。
• 每次刷新时，文本区域（textContainer）只会追加新文本，不会清空旧内容，会导致文本重复累积。

修复后的代码 #

function refresh() {
  var year = parseInt($("#existing_seasons_input_field").val(), 10);
  var season = $("#existing_seasons_input").val();
  // 1. 先重置所有21个图片容器和文本区域到初始状态
  for (var j = 1; j <= 21; j++) {
    var img = document.getElementById(j);
    img.src = "Images/MailingOrder/download.png"; // 重置为占位图
    img.name = ""; // 清空DocId标记
    
    $("#file-" + j + "-haeder-text").val(""); // 清空标题输入框
    var textContainer = $("#textContainer" + j)[0];
    textContainer.innerHTML = ""; // 清空描述文本，避免重复追加
  }

  $.ajax({
    async: true,
    url: '@Url.Action("GetAllDocsForSeason", "MaillingOrder")',
    contentType: "application/json; charset=utf-8",
    data: {
      year: year,
      season: season
    },
    type: "GET",
    success: function(val) {
      var tempList = val.Value;
      // 2. 填充有数据的图片和文本
      for (var i = 0; i < tempList.length; i++) {
        var elem = tempList[i];
        const test = elem.FileContent.Inhalt;
        const convert = arrayBufferToBase64(test);
        var container = document.getElementById(i + 1);
        container.src = "data:image/*;base64," + convert;
        container.name = String(elem.DocId);
        $("#file-" + (i + 1) + "-haeder-text").val(elem.DocHeader);
        var bodyTextDiv = $("#textContainer" + (i + 1))[0];
        var content = document.createTextNode(elem.DocDescription);
        bodyTextDiv.appendChild(content);
      }
    },
    error: function(req, textStatus, errorThrown) {
      // 可添加错误提示逻辑
    }
  });
}

修复说明 #

1. 全局重置：在发起AJAX请求前，先遍历所有21个图片容器和对应的文本区域，统一重置为占位图、清空输入框和文本内容。这样无论后端返回多少数据（包括空数组），前端都会先清除旧状态，避免残留内容。
2. 移除冗余逻辑：原代码中if (i + 1 === tempList.length)设置下一个图片为占位图的逻辑已被全局重置替代，无需单独处理。
3. 文本清空优化：使用innerHTML = ""清空文本容器，解决每次刷新追加文本的问题。

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