在没有任何HTML标签的情况下隐藏HTML文本

Question

我这里有一段HTML代码，其中有一些没有被任何HTML标签包围的文字。是否有方法来隐藏在“p”标签之后的“Enter”文本？

<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？

- Sergi Khizanishvili

---

你可以始终使用<span>标签将其包装起来。如果没有用标签包装，就没有其他方法了。 - atiq1589

在CSS中不可能实现，只能使用jQuery来完成。 - Luís P. A.

@LuísP.A.，你能给我一些使用jQuery的提示吗？ - Sergi Khizanishvili

这是关于编程的内容，请把它从英语翻译成中文。返回仅翻译的文本：此文本可以放置在页面任何位置，或者只能放在这个“p”标签中？@SergiKhizanishvili - Muhammad Usman

<div>结束在哪里？</div> - Aniruddha Gohad

Answer 1

我会考虑使用字体大小的 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>

- Temani Afif

---

请注意，屏幕阅读器仍将读出两个回车符。 - Cody Hamilton

Answer 2

你认为它会起作用吗？

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

- RITESH ARORA

---

它将删除最后一个元素。 - RITESH ARORA

Answer 3

抱歉回复晚了，但这是您可以使用 jquery 实现的方法。只需获取 div 的所有内容，过滤掉周围没有标签的内容，并将它们包装在带有样式属性 display:none 的 span 中。这将为您隐藏该文本。

$(".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>

谢谢

- Muhammad Usman