Question

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();

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