CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome-extension
Richard
Richard

Reputation: 103

Hiding text using Javascript / JQuery

I am developing a Chrome extension and trying to hide part of a page. I am fairly new to this stuff so apologies in advance if I am using the wrong terms or the question seems obvious!

The page format appears as below:

<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 suggests, I cannot figure out how to hide the bit highlighted with stars.

I have a function that takes as an input a variable that is the first element in class "wrapper":

function processComment(commentStart)
{
    $element = commentStart;

    while($element)
    {
        if(some condition)
        {
            $element.hide();
        }
        $element.next();
    }

Because this text is sitting by itself outside any tags, it is not being picked up. I can't just hide the whole of the wrapper class because there are some bits inside it that I need to show.

Any suggestions gratefully received.

Thanks, Richard

Upvotes: 3

Views: 100

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115272

Set visibility propery or wrapper as collapse and set visibility of childrens to visible for overriding visibility property. That it 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>

Upvotes: 1

cFreed
cFreed

Reputation: 4482

If I well understand, your if (some condition) is regarding the text content by itself, so it's a regex stuff or something like.

So what you can do is, having located the involved text part, wrap it between <span> tags: then you can address this <span> element the usual way.

It may look like this (here assuming your meta-example meant $elements are successive 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(' '));
}

Upvotes: 0

tozer83
tozer83

Reputation: 24

Your best bet might be to place the content you want hidden into a span of its own.

Upvotes: 0

Related Questions