Hiding text with Javascript / JQuery
I am developing a Chrome extension and am trying to hide part of a page. I'm new to this stuff, so apologize in advance if I'm using the wrong terms or if the question seems obvious!
The page format looks like this:
<div class="wrapper">
<span class="loud" style="text-decoration: none;">...</span>
<div class="leave-gap">...</div>
<quote>...</quote>
"*** I can't figure how to hide this ***"
<p></p>
<span id="id_12345" class="none">...</span>
<div class="block-footer">...</div>
<div class="leave-gap">...</div>
</div>
As the snippet shows, I can't figure out how to hide the asterisked bit.
I have a function that takes as input a variable that is the first element of the wrapper class:
function processComment(commentStart)
{
$element = commentStart;
while($element)
{
if(some condition)
{
$element.hide();
}
$element.next();
}
Since this text sits itself outside of any tags, it is not matched. I can't just hide the entire wrapper class because there are a few bits in it that I need to show.
Any suggestions are greatly appreciated.
Thanks Richard
source to share
Set visibility property or wrapper to collapse and set the visibility of children to visible to override the visibility property. This will only hide the text node.
$('.wrapper').css('visibility', 'collapse').find('*').css('visibility', 'visible');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<span class="loud" style="text-decoration: none;">...</span>
<div class="leave-gap">...</div>
<quote>...</quote>
"*** I can't figure how to hide this ***"
<p></p>
<span id="id_12345" class="none">...</span>
<div class="block-footer">...</div>
<div class="leave-gap">...</div>
</div>
source to share
If I understand well, yours if (some condition)
refers to text content itself, so it is a regex or something.
So, what can you do by placing the involved piece of text, wrap it between the tags <span>
: then you can refer to this element in the <span>
usual way.
It might look like this (here, assuming your meta example means $element
are sequential words):
function processComment(comment) {
// (comment is supposed to be the HTML element to process)
var words = $(comment).html().split(' ');
for (var i in words) {
var word = words|i];
if(some condition on word) {
words[i] = '<span class="hidden-word">' + word + '</span>';
}
}
$(comment).html(words.join(' '));
}
source to share