Is there a way to use Jquery's .unwrap() multiple times without copying and pasting? It'd be nice if it could accept an argument or something like: .unwrap(4) but it doesn't. Is there a more clever solution to achieving the following:?

$(".foo a").unwrap().unwrap().unwrap().unwrap();

<script src=".1.1/jquery.min.js"></script>
<ul>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 1</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 2</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 3</a>
                </div>
            </li>
        </ul>
    </div>
</li>
</ul>

Is there a way to use Jquery's .unwrap() multiple times without copying and pasting? It'd be nice if it could accept an argument or something like: .unwrap(4) but it doesn't. Is there a more clever solution to achieving the following:?

$(".foo a").unwrap().unwrap().unwrap().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 1</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 2</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 3</a>
                </div>
            </li>
        </ul>
    </div>
</li>
</ul>

• javascript
• jquery
• html

• 1 Is this for a project or curiosity? If it's the former and you feel you have to use unwrap that many times I would suggest maybe just cloning/destroying the element and appending it to the parent. – zfrisch Commented May 7, 2015 at 22:26
• 5 $(".foo > div").replaceWith($(".foo a"))? – Patrick Evans Commented May 7, 2015 at 22:27
• for (var i = 0; i <= 3; i++) { $(".foo a").unwrap(); } – emerson.marini Commented May 7, 2015 at 22:30
• whatever method you use should be conscious that using multiple unwraps won't perform nearly as well as a one time replacement method – charlietfl Commented May 7, 2015 at 23:04
• @ShemSeger See post. Briefest was able to reduce to , here. – guest271314 Commented May 8, 2015 at 15:05

5 Answers 5

Use parentsUntil
the child of foo (.foo > *)
(which would be an ancestor of the element).

Use addBack to include the element itself.

$('.foo a').parentsUntil('.foo > *').addBack().unwrap();

Fiddle 1

$.fn.unwrapN = function(n) {
  while(n--) $(this).unwrap();
  return $(this);
}

Fiddle 2

You could always write your own:

$.fn.unwrapTimes = function(times){
    var unwrapCount = times;
    return this.each(function(){
        var $this = $(this);
        for(var i=0;i<unwrapCount;i++){
             $this.unwrap();   
        }
    });
};

fiddle

Obviously the name should be changed but the logic is sound.

Can use html()

$('.foo').html($('.foo a'));

That approach isn't scaleable for more than one though but can use html(fn) for multiple instances

$('.foo').html(function(){
   return $(this).find('a')
});

Demo

Why overcomplicate it?

var $wrapper = $('li.foo'),
    $keep = $wrapper.find('a'),
    $result = $wrapper.empty().append($keep);

console.log($result[0].outerHTML);

http://jsfiddle.net/k5mn0gnm/

For single foo elememt, try utilizing .prependTo() , .empty()

 $(".foo a").prependTo($(".foo").empty());

$(".foo a").prependTo($(".foo").empty());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>

For multiple .foo classes , try

$(".foo a").each(function() {
  $(this).prependTo($(this).parents(".foo").empty());
});

http://jsfiddle.net/pu7Lmxfr/5/