jQuery removing wrapper on elements, is it possible?

Question

I know it's a little hack but wondering if it is possible, I have the following markup (example)

<div class="homepage-boxes">

    <div class="row-fluid">
        <div class="span4"></div>
        <div class="span4"></div>
        <div class="span4"></div>
    </div>
    <div class="row-fluid">
        <div class="span4"></div>
        <div class="span4"></div>
        <div class="span4"></div>
    </div>

</div>

What I want to do is remove the

<div class="row-fluid">

wrappers around the span4 containers so it will simply be

<div class="homepage-boxes">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

I can't really modify core files on this CMS as will cause issues with upgrades so going for a jQuery approach for a quick fixture until can decide how to action correctly so I know it's likely messy but it will only be for mobile.

Any ideas anyway? I have had a look at .unwrap but did not have much luck with it

Answer 1

You could select the children elements and then use the .unwrap() method:

$('.homepage-boxes .row-fluid').children().unwrap();