Unwrap Element in HTML String

Best way to take HTML as a string (eg AJAX response) and unwrap an element in it.

by vol7ron

HTML

<div class="label">Start With:</div>
<pre id="original"></pre>

<div class="label">What's Wanted:</div>
<pre id="wanted"><div>foo</div><div>bar</div></pre>
<hr />
<div class="label">Attempt: .find()</div>
<pre id="find"></pre>

<div class="label">Attempt: .closest()</div>
<pre id="closest"></pre>

<div class="label">Attempt: .wrap().parent()</div>
<pre id="wrapped"></pre>

CSS

.label { font:italic bold 11px Georgia,Verdana; margin:1em 0 .5em; }
pre    { border:1px solid black; padding:1em; }
hr     { margin: 1.5em 0 1em; }

#original { background:#eee; }
#wanted   { background:#def; }

JavaScript

<!--
   var $html= "<pre><div>foo</div></pre><pre><div>bar</div></pre>";

   /* No Changes */
   jQuery('#original').html($html);

   /* Find */
   var $find = jQuery($html).find('*').unwrap();
   jQuery('#find').html($find);

   /* Closest */
   var $closest = jQuery($html).closest('pre').unwrap().html();
   jQuery('#closest').html($closest);

   /* Wrapped */
   var $pre = jQuery('pre', jQuery($html).wrap('<div />').parent() );
   $pre.each(function(){
                jQuery('#wrapped').append(jQuery(this).html());
            });

   //=========== Prettify Output ===========
   var $wanted = jQuery('#wanted').html();
   jQuery('pre').not('#wanted, #original, #original *').each(function(){
      var t = jQuery(this);
      t.css({background: t.html()==$wanted?'#efe':'#fee'});
   });
   
-->