Hide text in html that doesn't have any html tags

Question

I have the HTML below, and there is text that does not have an HTML environment. Is there a way to hide the text "Enter" , which is after the tag "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>

It is not possible to wrap it with a div or any other tag, so I need another solution like JavaScript or some kind of CSS?

Answer 1

I would consider a CSS hack with font size:

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

Run codeHide result

Another idea with 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>

Run codeHide result

Answer 2

, jquery. div, span style 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>

Hide result

Answer 3

,

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