使用MutationObserver监听DOM变化并动态控制元素可见性

// 假设这是你的图片上传成功回调函数
function handleImageUploadSuccess(imageData) {
  // ... 添加缩略图到DOM ...
  // 注意：ID应该是唯一的，这里使用类名或动态ID
  $('#target').append('<div id="thumbnail-' + imageData.id + '" class="thumbnail-item">缩略图</div>');

  // 直接隐藏上传按钮
  $('#submit').hide();
}

// 当用户删除所有缩略图时
function handleRemoveAllThumbnails() {
  // ... 移除所有缩略图 ...
  $('.thumbnail-item').remove();

  // 重新显示上传按钮
  $('#submit').show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addImage()">添加图片缩略图</button>
<button onclick="removeAllImages()">移除所有缩略图</button>
<div id="target" style="border: 1px solid #ccc; padding: 10px; min-height: 50px; margin-top: 10px;">
  <!-- 动态添加的缩略图将显示在这里 -->
</div>
<button id="submit" style="margin-top: 10px;">上传文件</button>

// 模拟动态添加图片缩略图的函数
let thumbnailCount = 0;
function addImage() {
  thumbnailCount++;
  // 每次添加一个带唯一ID和指定类名的缩略图
  $('#target').append(
    '<div id="thumbnail-' + thumbnailCount + '" class="thumbnail-item" ' +
    'style="display: inline-block; margin: 5px; padding: 5px; border: 1px solid green; background-color: #e0ffe0;">' +
    '缩略图 ' + thumbnailCount +
    '</div>'
  );
}

// 目标节点：我们希望观察的容器
const targetNode = document.getElementById("target");

// 配置对象：我们关注子节点的添加/删除，以及子树中的变化
const config = {
  childList: true, // 观察子节点的添加或删除
  subtree: true    // 观察目标节点及其所有后代节点
};

// 当 DOM 变化发生时执行的回调函数
const callback = (mutationList, observer) => {
  let hasThumbnail = $('#target').find('.thumbnail-item').length > 0;

  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      // 检查是否有新节点被添加
      if (mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach(node => {
          // 确保是元素节点且具有我们关注的类名
          if (node.nodeType === Node.ELEMENT_NODE && $(node).hasClass("thumbnail-item")) {
            console.log("检测到缩略图添加，隐藏上传按钮。");
            $('#submit').hide();
            hasThumbnail = true; // 更新状态
          }
        });
      }

      // 检查是否有节点被移除
      if (mutation.removedNodes.length > 0) {
        mutation.removedNodes.forEach(node => {
          if (node.nodeType === Node.ELEMENT_NODE && $(node).hasClass("thumbnail-item")) {
            // 在节点移除后，重新检查容器中是否还有其他缩略图
            if ($('#target').find('.thumbnail-item').length === 0) {
              console.log("所有缩略图已移除，显示上传按钮。");
              $('#submit').show();
              hasThumbnail = false; // 更新状态
            }
          }
        });
      }
    }
  }

  // 确保在所有处理完成后，按钮状态与实际缩略图存在状态一致
  if (hasThumbnail) {
      $('#submit').hide();
  } else {
      $('#submit').show();
  }
};

// 创建 MutationObserver 实例
const observer = new MutationObserver(callback);

// 在 DOM 完全加载后开始观察
$(document).ready(function() {
  // 启动观察，指定目标节点和配置
  observer.observe(targetNode, config);
  console.log("MutationObserver 已启动，正在监听 #target 变化。");

  // 页面加载时进行一次初始检查，以防 #target 中已有缩略图
  if ($('#target').find('.thumbnail-item').length > 0) {
      $('#submit').hide();
  } else {
      $('#submit').show();
  }
});

// 示例：移除所有缩略图的按钮
function removeAllImages() {
  $('#target').empty();
}