CODEWITHSUNDEEP
javascriptjqueryhtmlclasstext
Evan
Evan

Reputation: 3501

Jquery Hide Class when no class is present

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

Upvotes: 1

Views: 572

Answers (6)

gblazex
gblazex

Reputation: 50109

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

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630399

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.

Upvotes: 1

yedpodtrzitko
yedpodtrzitko

Reputation: 9359

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?

Upvotes: 0

Lucia
Lucia

Reputation: 4767

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

Upvotes: 0

Josiah
Josiah

Reputation: 4854

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.

Upvotes: 0

amfeng
amfeng

Reputation: 1073

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

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

?

Upvotes: 0

Related Questions