// unwrapInner function // http://wowmotty.blogspot.com/2012/07/jquery-unwrapinner.html jQuery.fn.extend({ unwrapInner: function(selector) { return this.each(function() { var t = this, c = $(t).children(selector); if (c.length === 1) { c.contents().appendTo(t); c.remove(); } }); } }); // demo stuff var before = '', after = '', r = $('.results'), showResult = function(sel, when) { $('<li/>', { class: when === 'Before' ? 'grey' : 'green', text: when + ': ' + $(sel).html() }).appendTo(r); }; // wrap inner and make text red $('.test').wrapInner('<span class="red" />'); // results r.append('<li><br>Basic unwrap - unwrapInner()</li>'); showResult('.test1', 'Before'); $('.test1').unwrapInner(); showResult('.test1', 'After'); r.append('<li><br>Unwrap specific selector - unwrapInner("div.green")</li>'); showResult('.test2', 'Before'); $('.test2').unwrapInner('div.green'); showResult('.test2', 'After'); r.append('<li><br>Won\'t unwrap multiple children - unwrapInner()</li>'); showResult('.test3', 'Before'); $('.test3').unwrapInner(); showResult('.test3', 'After'); r.append('<li><br>But will unwrap a specific target - unwrapInner("div.green")</li>'); showResult('.test4', 'Before'); $('.test4').unwrapInner('div.green'); showResult('.test4', 'After'); r.append('<li><br>The only problem that occurs is when there are multiple children and you target the first one.. it gets added to the end - unwrapInner(".red")</li>'); showResult('.test5', 'Before'); $('.test5').unwrapInner('.red'); showResult('.test5', 'After'); r.append('<li><br>Use the replaceWith function instead (".red")</li>'); showResult('.test6', 'Before'); $('.test6').find('.red').replaceWith( $('.test6 .red').contents() ); showResult('.test6', 'After');
<div style="display:none"> <div class="test test1"> not red <span>text</span> </div> <div class="test2"> <div class="green"> not green <span>text</span> </div> </div> <div class="test3"> <span class="red"> red text </span> <div class="green"> green text </div> </div> <div class="test4"> <span class="red"> red text </span> <div class="green"> green text </div> </div> <div class="test5"> <span class="red"> red text </span> <div class="green"> green text </div> </div> <div class="test6"> <span class="red"> red text </span> <div class="green"> green text </div> </div> </div> <ul class="results"></ul>