Select and hide text to the end of a div

Question

I have a description id that has lots of tags that come from a database, I can't alter the description but I would like to select the text until the end of the div description The text I want to hide :

<h4>Price</h4>Members - £125.00 + VAT&nbsp;<br />Non-members - £145.00 + VAT</div>

Could I target :lastOfType(h4) until the end of the div? the text is not even in tags.

the description is too big to paste. It is a htmlEncoded column in a database that is wrapped in `
` — StudentRik, Sep 15 '15 at 12:11
Sorry but it is hard to recommend you a perfect solution without seeing actual output. — m4n0, Sep 15 '15 at 12:11
If the text is not in a tag it can't be selected by CSS. CSS only selects elements. The only way to address the text (which is a **text node**) is by selecting the parent and setting styles there. This, of course, may have implications for child elements which you might have to address. Otherwise, javascript. would be required. — Paulie_D, Sep 15 '15 at 12:14
Possible duplicate - http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — Paulie_D, Sep 15 '15 at 12:15

freedomn-m · Accepted Answer · 2015-09-15T13:36:58.103

Assuming your output is similar to:

<div id="description">
    Lorem ipsum dolor sit amet... harum homero.
    <h4>Price</h4>
    Members - £125.00 + VAT<br />
    Non-members - £145.00 + VAT
</div>

you won't be able to use a jquery selector to find the text after the <h4> as the main text "Lorem..." and the later text "Members..." are at the same level in the DOM hierarchy.

You can use jquery to read the content, then parse it, eg:

var content = $("div#description").html();
content=content.replace(/\<h4.*/, "");
$("div#description").html(content);

or use content.lastIndexOf but if it's htmlencoded, you won't get other <

If you want to "hide" the text, but not remove, you can use the above to wrap in another span then hide that, eg:

var content = $("div#description").html();
content = content.replace(/(\<h4.*)/, "<span class='hidden'>$1</span>");
$("div#description").html(content);
$("div#description>.hidden").hide();

(or use css to hide hidden etc)

Daniel Arant · Answer 2 · 2015-09-15T13:06:56.233

There are at least three ways to achieve the desired effect. @freedomn-m described two of them. The last one, wrapping the text you wish to show and hide in a <span> tag, is definitely the cleanest, because it does not require modifying the structure of the document each time you want to show or hide the DOM nodes in question.

However, if for some reason you cannot or do not wish to modify the structure of the HTML, you could also use jQuery's .contents() method to get a collection that contains all of the child nodes of the div tag, then use .slice() to select and .remove() to remove the last few nodes in the <div> tag. You can then use .append() to add them back to the <div> tag.

var length = $div.contents().length;
var $priceNodes = $div.contents().slice(length - 4).remove(); // Returns a jQuery object representing the last four child nodes of the div tag

$div.append($priceNodes); // Adds the price-related html nodes back into the document just before the closing div tag

Here is a working jsFiddle that demonstrates this approach: https://jsfiddle.net/m14yLesr/

Select and hide text to the end of a div

2 Answers2