如何移除div class元素内未被单独标签包裹的独立文本内容

方案1：纯CSS隐藏（无需修改DOM结构，仅视觉隐藏） #

原理是先屏蔽父元素所有文本的可见性，再单独恢复内部有标签的内容样式，示例代码如下：

.price {
  /* 二选一即可，按需选不影响现有布局的方式 */
  font-size: 0; 
  /* 或者用 color: transparent;  */
}

.price > span {
  /* 恢复为你原本设置的span样式即可 */
  font-size: 16px;
  color: #222;
}

这个方案改动最小，不会影响页面原有布局，适合只需要隐藏不需要彻底删除文本的场景。

方案2：JavaScript直接移除文本节点（彻底从DOM中删除内容） #

如果需要完全清除这段无标签文本，可通过遍历父元素的子节点，匹配文本节点后删除，示例代码如下：

const priceContainer = document.querySelector('.price');
// 遍历所有子节点
Array.from(priceContainer.childNodes).forEach(node => {
  // 匹配文本节点，且内容包含/Day则删除
  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().includes('/Day')) {
    node.remove();
  }
});

如果有权限修改原始HTML结构的话，最简单的方式是给/Day套上自定义类的span标签，直接给该类设置display: none即可，可维护性最高。

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