JQuery Get element without one of it's children?

Question

is it possible to do this in JQuery:

<div>
   <h2>Test test</h2>
      <span class="test">
          HELOOOO
      </span>
</div>

If I have the above code stored in variable (eg: var content), is there any function to call that returns me the original content without some specific element? Something like var content = content.remove('.test')

<div>
   <h2>Test test</h2>
</div>

and this should be the returned value?

Answer 1

This answer should work.

$(content).find('.test').remove().end()[0].outerHTML will only work in the case you posted, not in cases where there is more than one "root" element due to the [0] only the first would be selected.

If you wrap the content into a single root element then it's easier and then you can simply use html() from jQuery.

var $template = $('<div><h1>A</h1>B<h1>A</h1>B</div><div><h1>A</h1>B<h1>A</h1>B</div>');
var filtered = $("<div>").append($template.find("h1").remove().end()).html();

alert(filtered);

http://jsfiddle.net/XY23R/1/