Question

我在下面有HTML代码，并且有一些文本没有任何HTML环绕。是否有任何方法可以隐藏文字“输入”，它位于“p”标记之后？

<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p>&nbsp;</p>
Enter <-- i want to hide this text
<div class="subhead"></div>
</div>

不可能用div或任何其他标签包装它，所以我需要一些不同的决定，如JavaScript或一些CSS？

Answer 1

我会考虑使用font-size的CSS hack：

.entry {
  font-size:0;
}
.entry * {
  font-size:initial;
}

<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p>&nbsp; somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>

visibility的另一个想法：

.entry {
  visibility:hidden;
}
.entry * {
  visibility:visible;
}

<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p>&nbsp; somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>

Answer 2

很抱歉迟到的回复，但您可以通过jquery来完成此操作。只需获取div的所有内容，过滤掉没有标签的内容，并将其包含在span内，样式属性为display:none。这将隐藏该文本。

$(".entry")
    .contents()
    .filter(function () {
    return this.nodeType === 3 && this.nodeValue.trim() !== "";
}).wrap("<span style='display:none' ></span>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p>&nbsp;</p>
Enter <!-- i want to hide this text-->
<div class="subhead"></div>
</div>

谢谢

Answer 3

你认为它会起作用

var ele =document.getElementsByClassName('entry')[0]
ele.removeChild(ele.lastChild)

隐藏html中没有任何html标签的文本

3 个答案: