如何使用jQuery根据Select选项值隐藏Shopify中含Default Title的div

问题原因 #

你现有的代码无法生效主要有两个核心问题：

• $(document).ready() 仅在页面初始DOM结构加载完成时触发，而Shopify第三方应用生成的元素是异步渲染的，触发ready事件时目标元素还没有被插入到页面中，选择器无法匹配到对应元素，代码自然不会生效
• 你当前代码选中的是.shopthelook_variants_single 这个下拉选框元素，若你需要隐藏的是整个规格选择区域，还需要向上匹配对应的父容器

最优解决方案 #

推荐使用 MutationObserver 监听页面DOM变化，只要目标元素被插入页面就会立刻触发处理逻辑，性能比定时轮询好很多：

// 监听DOM变化，适配异步渲染的第三方元素
const observer = new MutationObserver(function(mutations) {
  // 遍历每次DOM变化
  mutations.forEach(function(mutation) {
    // 查找所有符合条件的下拉选框
    const $targetSelect = $(".shopthelook_variants_single option:contains('Default Title')").filter(function() {
      return $.trim($(this).text()) === 'Default Title';
    }).parent('select');
    
    if ($targetSelect.length) {
      // 隐藏整个规格选择区域，向上找到父容器.select-size-wrap后移除
      $targetSelect.closest('.select-size-wrap').remove();
      // 如果仅需要删除Default Title这个option项，替换为下行代码即可
      // $targetSelect.find('option:contains("Default Title")').remove();
      
      // 处理完成后断开观察者，避免不必要的性能消耗
      observer.disconnect();
    }
  });
});

// 配置观察者：监听body下所有子元素的新增/删除变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

简易备选方案 #

如果不想用MutationObserver，也可以用定时轮询的方式，简单易写：

const hideTimer = setInterval(function() {
  const $targetSelect = $(".shopthelook_variants_single option:contains('Default Title')").filter(function() {
    return $.trim($(this).text()) === 'Default Title';
  }).parent('select');
  
  if ($targetSelect.length) {
    $targetSelect.closest('.select-size-wrap').remove();
    // 找到元素后清除定时器，避免一直轮询占用资源
    clearInterval(hideTimer);
  }
}, 200); // 每200ms检查一次，可自行调整间隔

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