1

I have some text below called (16 Courses). I need to hide only this text, but I can't seem to hide it no matter what I try using jquery. Is there any help someone could provide so I can hide on this text?

<div id="programAttributes">
    <div class="left" id="credits">
       <h3>Credits</h3>
       <h3 class="cost">48</h3>
       (16 Courses)
    </div>
    <div class="gutter12 left">&nbsp;</div>
    <div class="left" id="costPer">
       <h3>Cost Per Credit</h3>     
       <h3 class="cost">$300</h3>                            
    </div>
</div>

I thought if I could write something like this that would do the trick, but I am so far unsuccessful.

$("#credits:not([class!=h3])").hide();
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
Evan
  • 3,411
  • 7
  • 36
  • 53
  • 1
    Because it is a text node, you won't be able to simply hide it. Do you want it to reappear later? Or do you want to get rid of it permanently? The solution will differ based on your need. – user113716 Jul 13 '10 at 22:20

6 Answers6

2

Usage

// hides in the whole document
hideText("(16 Courses)");

// only hide inside a specific element
hideText("(16 Courses)", $('#programAttributes'));

// make it visible again
showText("(16 Courses)");

[See it in action]

CSS

.hiddenText { display:none; }

Javascript 

// escape by Colin Snover
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

function hideText(term, base) {
  base = base || document.body;
  var re = new RegExp("(" + RegExp.escape(term) + ")", "gi");
  var replacement = "<span class='hiddenText'>" + term + "</span>";
  $("*", base).contents().each( function(i, el) {
    if (el.nodeType === 3) {
      var data = el.data || el.textContent || el.innerText;
      if (data = data.replace(re, replacement)) {
        var wrapper = $("<span>").html(data);
        $(el).before(wrapper.contents()).remove();
      }
    }
  });
}

function showText(term, base) {
  var text = document.createTextNode(term);
  $('span.hiddenText', base).each(function () {
    this.parentNode.replaceChild(text.cloneNode(false), this);
  });
}
gblazex
  • 49,155
  • 12
  • 98
  • 91
  • This is not a good idea, though it's fancy in terms of show/hide, it also destroys *any* event handlers, among other things, on the entire document, for example: http://jsbin.com/uvuno3/3/edit Click any `

    ` then run the functions, it'll break.

     – Nick Craver Jul 13 '10 at 22:21
  • 1
    +1 - although a little lengthy by jQuery's standards, it works. – Anurag Jul 14 '10 at 00:14
  • This would still break if the node contained any *other* text, needs a bit more refinement to be usable :) – Nick Craver Jul 14 '10 at 00:25
1

You can check for and remove textnodes like this:

​$("#credits").contents().filter(function() {
  if(this.nodeType == 3) 
    this.parentNode.removeChild(this);
});​​​​​​

You can test it here, this gets all the nodes (including text nodes) with .contents(), then we loop through, if it's a text node (.nodeType == 3) then we remove it.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • That would destroy the node completely. I think the OP would be much better off wrapping the text nodes in some other element, and hide and show on that. – Anurag Jul 14 '10 at 00:13
  • @Anurag - *If* the OP needs to show it again, yes...but that's an assumption at the moment. If that's the case you could easily wrap the node above in a ``, etc...but I didn't making any more complicated than needed for the *effect* the OPs after at the moment. – Nick Craver Jul 14 '10 at 00:29
  • i just tested this and it works in production. i'm able to update the website template with the javascript to hide the course information. at ths time, we're unable to modify the code that writes the (16 courses) type information for about 3 weeks, because we have a build scheduled next week and the next production update won't be until next month. by that time though, we will have the fix in place where i no longer need to hide the text. so this was a temporary fix. – Evan Jul 14 '10 at 13:42
  • "This would still break if the node contained any other text"? – gblazex Jul 14 '10 at 13:55
  • @galambalazs - This answer isn't *trying* to remove a single term, it's removing all text nodes, with a lot less processing. – Nick Craver Jul 14 '10 at 14:03
  • I see, just thought I give your comment back :) – gblazex Jul 14 '10 at 14:11
0

Could you wrap it in a separate span, and then do:

$('#credits span').hide();

?

amfeng
  • 1,065
  • 5
  • 17
  • i've accepted the answer below, but unfortunately, i'm not able to write any new code within the body of the content. so adding span tags, for example, would not be possible otherwise i would write a new class for it and hide it that way. thank you feng for your support. – Evan Jul 14 '10 at 13:46
0

Try wrapping the text in a span as follows:

<div class="left" id="credits">
   <h3>Credits</h3>
   <h3 class="cost">48</h3>
   <span id="toHide">(16 Courses)</span>
</div>

then you can use jquery:

$("#credits > span)").hide();

the hide() function has to be applied to a DOM element.

Josiah
  • 4,754
  • 1
  • 20
  • 19
0

I would use a label tag around the text so I can handle it with jquery.

Lucia
  • 4,657
  • 6
  • 43
  • 57
  • Don't use a ` – Stephen P Jul 14 '10 at 00:53
0

It's textnode. Loop thru all parents nodes and if it's type is textnode, hide it. See also this:

How do I select text nodes with jQuery?

Community
  • 1
  • 1
yedpodtrzitko
  • 9,035
  • 2
  • 40
  • 42