动态DOM内容监听与元素显隐控制：MutationObserver实践指南

$(document).ready(function(){
    if($('#thumbnail').length){
        $('#submit').hide();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="getImage()">添加缩略图</button>
<div id="target"></div>
<button id="submit">上传文件</button>

function getImage() {
  $('#target').append('<div id="thumbnail">缩略图</div>');
}

// 1. 确定目标节点：缩略图将要被添加到的父容器
const targetNode = document.getElementById("target");

// 2. 配置观察选项：监听子节点的添加和移除，以及子树内的变化
const config = {
  attributes: false, // 不监听属性变化
  childList: true,   // 监听子节点的添加或移除
  subtree: true      // 监听目标节点及其所有子孙节点的变化
};

// 3. 定义回调函数：当DOM变化发生时执行
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") { // 如果是子节点列表发生变化
      mutation.addedNodes.forEach(node => { // 遍历所有被添加的节点
        // 检查节点是否是元素节点且ID为"thumbnail"
        if (node.nodeType === Node.ELEMENT_NODE && node.id === "thumbnail") {
          $('#submit').hide(); // 隐藏上传按钮
        }
      });
      // 进一步处理：如果所有缩略图都被移除，则显示上传按钮
      // 这里需要更复杂的逻辑来判断是否所有缩略图都已移除
      // 例如，检查 #target 中是否还存在任何 #thumbnail 元素
      if ($('#target').children('#thumbnail').length === 0) {
          $('#submit').show();
      }
    }
  }
};

// 4. 实例化并启动观察者
const observer = new MutationObserver(callback);

$(document).ready(function() {
  // 在DOM就绪后开始观察目标节点
  observer.observe(targetNode, config);

  // 如果需要，可以在某个时刻停止观察
  // observer.disconnect();
});

// ... (前面的 targetNode, config, observer 保持不变)

const callback = (mutationList, observer) => {
  let thumbnailAdded = false;
  let thumbnailRemoved = false;

  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      // 检查添加的节点
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE && node.id === "thumbnail") {
          thumbnailAdded = true;
        }
      });
      // 检查移除的节点
      mutation.removedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE && node.id === "thumbnail") {
          thumbnailRemoved = true;
        }
      });
    }
  }

  // 如果有缩略图被添加，则隐藏按钮
  if (thumbnailAdded) {
    $('#submit').hide();
  }
  // 如果有缩略图被移除，且当前 #target 中已没有 #thumbnail 元素，则显示按钮
  if (thumbnailRemoved && $('#target').children('#thumbnail').length === 0) {
    $('#submit').show();
  }
  // 边缘情况：如果页面加载时 #thumbnail 已经存在，也需要隐藏按钮
  // 可以在 $(document).ready() 中进行初始检查
};

$(document).ready(function() {
  // 初始检查：如果页面加载时 #thumbnail 已经存在，则隐藏按钮
  if ($('#target').children('#thumbnail').length > 0) {
    $('#submit').hide();
  }
  // 开始观察
  observer.observe(targetNode, config);
});