jquery remove html elements inside variable (jquery object)

Question

Inside HTML I have this DIV:

<div class="teaser">
  <img src="thumb1.jpg"><img src="thumb2.jpg"><br>  // usually one thumb image; can be up to three
  some text goes here, sometimes not<br>
  <a href="example.html">always a link here</a><br>
  and sometimes another line here
</div>

I need to capture the content of the DIV minus the first line (the thumbs) in a variable to pass on as title (caption) to a lightbox script. However, in a day I've learned something about javascript & jquery (both are my weak spots), yet nothing I found by searching the web, including several threads here on stackoverflow, did it, either throwing errors or still including the thumbs or removing the text, too, or even removing the thumbs from the DOM:

// takes the whole
var teaser = $(".teaser");

// TypeError: $(...).html(...).find is not a function
var teaser = $(".teaser").find("img").remove();

// IMGs removed from DOM
var teaser = $(".teaser").find("img").remove();

// IMGs still included; I think I understand why
var teaser = $(".teaser").not("img");

// ditto
var teaser = $(".teaser").clone().not("img");

// ditto:
var teaser = $(".teaser");
$(teaser).find("img").remove();

// no teaser at all (everything removed, not just the IMGs)
var teaser = $(".teaser");
teaser = $(teaser).find("img").remove();

// ditto
var teaser = $(".teaser").clone().find("img").remove();

Changing the sequence in chainings didn't work either (though I may have missed one or another).

This workaround seems to be ok:

var teaser = $(".teaser").html().replace(/(<img.*?)+<br[^>]*?/i,"");

However, depending on regex implementation in browsers it might be shaky, so I'd rather have something more robust, particularly not getting the first line at all.

TIA for any suggestion - hope I could make myself clear.

Edit:

using clone() in conjunction with children() or contents() got me a step further. However, both these will also remove the first text node, leaving two empty BR behind:

$("div.teaser").each(function() {
  var teaser = $(this).clone().children().not("img");
  var teaser = $(this).clone().contents().not("img");
});

OTOH filter("img"), find("img") or not("img") followed by remove() removes everything but the IMGs, which is beyond my head except for not()

var teaser = $(this).clone().find("img").remove();

Edit 2:

To wrap things up:

This is the solution @karaxuna suggested. It is important to re-assign the variable.

var teaser = $(this).clone();
teaser.find("img,br:first").remove();
teaser = $.trim(teaser.html());

While doing some further reading to better understand the logic behind the failures and the final solution I got a clue for doing it slightly more jquerish:

var teaser = $(this).clone();
teaser = $.trim($("img,br:first",teaser).remove().end().html());

The clue is the scope, or context, added to the $() selector. Using this here is familiar enough, yet it never occurred to me to use the var. Also, end() will keep remove()from still going all the way to the DOM...

$.trim technically not necessary of course, HTML ignores empty lines anyway.

So including the above workaround with regex there are at least three ways to go - kinda reminds me of Perl ;)

Thanks to both @karaxuna and @Ravi for sharing their experience and ideas!

Answer 1

No need for html()

var teaser = $(".teaser").find("img").remove();

EDIT:

Try this:

var teaser = $(".teaser").clone();
teaser.find("img").remove()
// use teaser

Answer 2

if You want to remove the whole html. then you can use empty()method

$(".teaser").empty();

if you are removing image only. then

$(".teaser").find("img").remove();

Answer 3

It's late, but try this $('img',$('.teaser')).remove().end().clone()