how to hide/remove all text in-between two elements?

Question

lets say i have this lump of HTML:

<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>

What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image"> .

I've looked all over and found pretty much nothing. Any ideas on how i could do this?

Answer 1

How about something like this? http://jsfiddle.net/ZW8q2/1

var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);

Answer 2

You could try:

var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);

JS Fiddle .

Answer 3

Try this:

Place a tag around what you want to hide, give div an ID name. So in the end your will look like:

<div id = "hideMe" style ="display:block">...Your Content...</div>

Use this javascript:

    function hide()
    {
    document.getElementById('hideMe').style.display = "none";
    return;
    }

Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:

<input type= "submit" onclick ="hide()">