I have HTML code here down below and there is text which does not have any HTML surrounding. Is there any method to hide the text “Enter” which is after “p” tag?
<div class="entry">
<p class="page-header" style="text-align: center;"><strong>Enter</strong></p>
<p> </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 some different decision like JavaScript or some CSS?
5
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> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>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> somethin here</p>
Enter (this will be hidden !!)
<div class="subhead">another text here</div>
</div>1
Do you think it will works
var ele =document.getElementsByClassName('entry')[0]
ele.removeChild(ele.lastChild)
1
Sorry for late response but this is how you can do it with jquery. Just get all the content of a div, filter the content with no tags around and wrap them inside span with style property as display:none. This will hide that text for you.
$(".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> </p>
Enter <!-- i want to hide this text-->
<div class="subhead"></div>
</div>Thanks