如何隐藏不在HTML标记内的文本？

Question

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

在上面的代码中，我想隐藏“US”这个单词。我已经隐藏了“US”之后的图片，但无法找到隐藏这个“US”单词的方法。有什么代码可以隐藏它吗？

- Rasika

---

你能不能直接删除“US”这个词？ - RasmusGlenvig

在某个内容周围添加一个标签。如果您需要对某些内容进行控制，则此部分必须反映在文档结构中。否则，它没有特定的属性可供使用。 - Vladimir M

可以使用 document.querySelector('.padd10_m').childNodes 进行访问。 - Rayon

据我所知，这个词是通过JavaScript或类似的方式引入的。 - Rasika

谢谢Rayon.. 看起来是个不错的想法。 也感谢Rasmus、aavrug、Vladimir、Mr_Green和deepak :) - Rasika

Answer 1

像这样的吗？

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

演示链接

或者

如果您想使用JavaScript（我不知道为什么），这里有解决方案：

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is text node
    pad.removeChild(el);     // remove the text node
  }
});

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

- Mr_Green

---

这可能是个好主意，如果“US”是唯一的单词。但它还包含了其他文本。 - Rasika

@RasikaWadibhasme 你有任何例子可以说明你的意思吗？ - Mr_Green

我所指的是，如果您查看<div class="padd10_m">中的内容，其中包含<a>标记。如果我将font-size:0px应用于padd10_m类，那么对<a>标记会有影响吗？ 如果没有影响，那么这对我很有帮助。 - Rasika

@RasikaWadibhasme 这不会影响 a 标签。我再次将正常的字体大小应用于它。 - Mr_Green

Answer 2

使用 CSS：

.padd10_m { font-size: 0; }
.padd10_m * { font-size: 1rem;}

- Quy Truong

---

太棒了，这对我来说看起来很新鲜。 这个 * 能工作吗？ - Rasika

我认为应该这样做。这意味着将字体大小应用于该类的所有子元素。 - Quy Truong

Answer 3

尝试使用 font-size 隐藏。

.padd10_m{font-size:0;}
.padd10_m > a{font-size:16px;}

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

- Abhishek Pandey

Answer 4

CSS

   .padd10_m {
    font-size:0px;
    }

    .padd10_m a{
    font-size:14px;
    }

HTML

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

- Santosh Khalse

Answer 5

你可以将图像（美国国旗）移动到文本上方：

.padd10_m img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
}

此外，您可以将字体颜色设置为与背景颜色相同。

img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
  }

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

更新：我没有意识到图片也应该被隐藏。这里有另一个解决方案：

.padd10_m {
  width: 40px;
  overflow: hidden;
  white-space: nowrap;
}

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

- Andy Tschiersch

---

谢谢安迪，但我也不想要那个标志。 :P - Rasika

Answer 6

使用 :after，您可以在管理员和标志之间添加一个空格。

.padd10_m{
  font-size: 0px;
}

.padd10_m a{
  font-size: 16px;
}

.padd10_m a:after{
  content: ' ';
}

- edisonmecaj

Answer 7

<script type="text/javascript">
    document.body.innerHTML = document.body.innerHTML.replace(/US <img/g, '<img');
</script>

爆炸

- jeremykenedy