// 假設這是你的圖片上傳成功回調(diào)函數(shù)
function handleImageUploadSuccess(imageData) {
  // ... 添加縮略圖到DOM ...
  // 注意：ID應該是唯一的，這里使用類名或動態(tài)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;">
  <!-- 動態(tài)添加的縮略圖將顯示在這里 -->
</div>
<button id="submit" style="margin-top: 10px;">上傳文件</button>

// 模擬動態(tài)添加圖片縮略圖的函數(shù)
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>'
  );
}

// 目標節(jié)點：我們希望觀察的容器
const targetNode = document.getElementById("target");

// 配置對象：我們關注子節(jié)點的添加/刪除，以及子樹中的變化
const config = {
  childList: true, // 觀察子節(jié)點的添加或刪除
  subtree: true    // 觀察目標節(jié)點及其所有后代節(jié)點
};

// 當 DOM 變化發(fā)生時執(zhí)行的回調(diào)函數(shù)
const callback = (mutationList, observer) => {
  let hasThumbnail = $('#target').find('.thumbnail-item').length > 0;

  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      // 檢查是否有新節(jié)點被添加
      if (mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach(node => {
          // 確保是元素節(jié)點且具有我們關注的類名
          if (node.nodeType === Node.ELEMENT_NODE && $(node).hasClass("thumbnail-item")) {
            console.log("檢測到縮略圖添加，隱藏上傳按鈕。");
            $('#submit').hide();
            hasThumbnail = true; // 更新狀態(tài)
          }
        });
      }

      // 檢查是否有節(jié)點被移除
      if (mutation.removedNodes.length > 0) {
        mutation.removedNodes.forEach(node => {
          if (node.nodeType === Node.ELEMENT_NODE && $(node).hasClass("thumbnail-item")) {
            // 在節(jié)點移除后，重新檢查容器中是否還有其他縮略圖
            if ($('#target').find('.thumbnail-item').length === 0) {
              console.log("所有縮略圖已移除，顯示上傳按鈕。");
              $('#submit').show();
              hasThumbnail = false; // 更新狀態(tài)
            }
          }
        });
      }
    }
  }

  // 確保在所有處理完成后，按鈕狀態(tài)與實際縮略圖存在狀態(tài)一致
  if (hasThumbnail) {
      $('#submit').hide();
  } else {
      $('#submit').show();
  }
};

// 創(chuàng)建 MutationObserver 實例
const observer = new MutationObserver(callback);

// 在 DOM 完全加載后開始觀察
$(document).ready(function() {
  // 啟動觀察，指定目標節(jié)點和配置
  observer.observe(targetNode, config);
  console.log("MutationObserver 已啟動，正在監(jiān)聽 #target 變化。");

  // 頁面加載時進行一次初始檢查，以防 #target 中已有縮略圖
  if ($('#target').find('.thumbnail-item').length > 0) {
      $('#submit').hide();
  } else {
      $('#submit').show();
  }
});

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