如何用JavaScript选择并隐藏包含指定文本的row类元素？

没问题，我来帮你解决这个问题！不用修改DOM结构，几行JavaScript就能实现你的需求，步骤很清晰：

第一步：获取所有.row元素 #

首先用document.querySelectorAll('.row')拿到页面上所有class为row的元素，它会返回一个类似数组的NodeList集合，方便我们后续遍历。

第二步：筛选包含“Text”文本的元素 #

逐个遍历这些.row元素，检查它们的文本内容是否包含“Text”。这里要注意：

• 用textContent可以获取元素及其所有子元素的文本内容，不管嵌套多深都能拿到
• 如果需要不区分大小写匹配（比如“text”“TEXT”也想匹配），可以把文本转成小写后再判断：row.textContent.toLowerCase().includes('text')

第三步：隐藏符合条件的元素 #

对筛选出来的元素，直接设置style.display = 'none'就能把它们隐藏起来。

完整可运行代码 #

// 等待DOM完全加载后执行（避免元素还没渲染就执行代码）
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有.row元素
  const allRows = document.querySelectorAll('.row');
  
  // 遍历每个元素
  allRows.forEach(row => {
    // 判断是否包含"Text"（区分大小写）
    if (row.textContent.includes('Text')) {
      row.style.display = 'none';
    }
  });
});

额外提醒 #

如果你的页面是动态加载内容（比如通过AJAX加载的.row元素），那可能需要把这段代码放在内容加载完成的回调里，或者使用MutationObserver来监听DOM变化，确保新添加的元素也能被处理。不过如果是静态页面，上面的代码就完全够用啦！

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