Remove all text in between a div without losing text outside of it - jQuery JS

Question

I have some text that is stored in a variable like this:

<div class="foo">text inside div</div>
outside text here.

I want to remove the entire div and the text in it and save the outside text.

Answer 1

Create an element based off the HTML. Then,

$('.foo', context).remove();

For example:

var text = "<div class=\"foo\">text inside div</div>\noutside text here.";
var xml = $('<root>' + text + '</root>');
$('.foo', xml).remove();
text = xml.html();

Answer 2

You can use after, to insert the inner text after the div, and then remove it:

var $foo = $(".foo"); 
$foo.after($foo.text()).remove();

Or you could use the replaceWith function, to replace the div element with its inner text content:

$foo.replaceWith($foo.text());