JQuery - Unwrap only one element

Question

I have got such situation:

<div>
    <span id="x1"></span>
    <span id="x2"></span>
    <span id="x3"></span>
</div>

And I am trying to get something like this:

<div>
    <span id="x1"></span>
</div>
<span id="x2"></span>
<div>
    <span id="x3"></span>
</div>

I have tried to do that using unwrap() function like this:

$('#x2').unwrap();  

But this function removes whole <div>. So how can I do that using jQuery/JavaScript? Thanks for help.

Answer 1

You can unwrap the spans from the common div wrapper and then just wrap x1 and x3 in their own new divs.

$('span').unwrap();
$('#x1,#x3').wrap('<div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="x1">x1</span>
    <span id="x2">x2</span>
    <span id="x3">x3</span>
</div>

If your spans don't have IDs, you could do something like

$('div > span:even').wrap('<div>').parent().unwrap()

Answer 2

Get the all siblings after the target element, wrap them in a new div and put them after the original container.

put the target element between both divs.

This will work for any number of items in the container and will only unwrap the target element.

const el=$("#x2")
const parent =el.parent()
const nextSiblings=el.nextAll()
const newWrap=$("<div>").append(nextSiblings)
parent.after(newWrap)
parent.after(el)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div{border:solid 1px red;}
span{display:block}
</style>

<div>
    <span id="x1">1</span>
    <span id="x2">2</span>
    <span id="x3">3</span>
</div>

EDIT add possibility of unwraping more than one element and also handle removal from first or last positions.

const unWrapOne=el=>{
  const parent =el.parent()
  const nextSiblings=el.last().nextAll()
  
  if(nextSiblings.length>0){
    const newWrap=$("<div>").append(nextSiblings)
    parent.after(newWrap)
  }
  
  parent.after(el)
  
  if(parent.children().length===0)
    parent.remove()
}

const unwrapSome = elements => elements.each((index,el)=>unWrapOne($(el)))

unwrapSome($("#x3,#x5")) //unwrap 2 non contiguous elements
//unwrapSome($("#x2,#x3")) //unwrap 2 contiguous elements
//unwrapSome($("#x2")) //unwrap 1 element from middle
//unwrapSome($("#x1")) //unwrap 1 element from begining
//unwrapSome($("#x6")) //unwrap 1 element from end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div{border:solid 1px red;}
span{display:block}
</style>

<div>
    <span id="x1">1</span>
    <span id="x2">2</span>
    <span id="x3">3</span>
    <span id="x4">4</span>
    <span id="x5">5</span>
    <span id="x6">6</span>
</div>