jQuery unwrapInner

http://wowmotty.blogspot.com/2012/07/jquery-unwrapinner.html

by Mottie

HTML

<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>

CSS

.red { color: red; }
.green { color: green; }
.grey { color: #777; }

JavaScript

// 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');