动态生成多卡片场景下，使用JS/JQuery隐藏空内容父容器的问题求助

你的代码问题主要出在这几个地方：只检查了第一个.row-joinee元素、没处理文本里的空白字符，而且.live()方法早就被jQuery废弃了。要实现你要的效果，得遍历所有动态生成的元素，逐个判断处理，具体修改如下：

修改后的JS代码（适用于PHP渲染的静态动态内容） #

jQuery(function($) {
  // 遍历每一个row-joinee元素
  $('.row-joinee').each(function() {
    // 先去除文本前后的空白，再判断是否为空
    if ($.trim($(this).text()).length === 0) {
      // 找到对应的父容器，设置display:none
      $(this).closest('.wrapper-newjoinee-custom').css('display', 'none');
      // 也可以用.hide()，效果一样：$(this).closest('.wrapper-newjoinee-custom').hide();
    }
  });
});

如果是AJAX等动态加载的内容 #

如果这些卡片是后续通过AJAX或其他方式动态插入到页面的，上面的代码只会在页面初始加载时执行一次，不会处理新插入的内容。这种情况可以用MutationObserver监听DOM变化，自动处理新添加的元素：

jQuery(function($) {
  // 封装判断逻辑为函数，方便重复调用
  function hideEmptyContainers() {
    $('.row-joinee').each(function() {
      if ($.trim($(this).text()).length === 0) {
        $(this).closest('.wrapper-newjoinee-custom').css('display', 'none');
      }
    });
  }

  // 页面初始加载时执行一次
  hideEmptyContainers();

  // 监听DOM变化，当有新元素插入时重新执行判断
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        hideEmptyContainers();
      }
    });
  });

  // 监听body下的所有子元素变化（可以根据实际情况缩小监听范围）
  observer.observe(document.body, { childList: true, subtree: true });
});

关键知识点说明 #

• $.trim()：必须用这个处理文本，因为PHP输出的$term->data可能包含换行、空格等空白字符，直接用.text().length会把这些空白当成内容，导致判断错误。
• .each()：遍历所有匹配的.row-joinee，确保每一组卡片都被检查到，而不是只处理第一个。
• .closest()：精准定位到当前空内容对应的父容器，不会误操作其他组的卡片。

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