Question

The program I’m working in I can wrap images with a div
and I can name it’s ID so it’s like this:

<div id="caro" style=" position:absolute; top:0px; left:0px; width:602px; height:0px;  z-index:2;">

          <div id="SGROBJ7DCC09717112EB0" style=" position:absolute; top:68px; left:148px; width:602px; height:200px;  z-index:3;">
            <img src="Untitled_1/goim003.jpg" width=602 height=200 border=0 alt="">
          </div>

          <div id="SGROBJ7DCC09717112FF0" style=" position:absolute; top:68px; left:148px; width:602px; height:200px;  z-index:4;">
            <img src="Untitled_1/goim004.jpg" width=602 height=200 border=0 alt="">
          </div>

          <div id="SGROBJ7DCC09717113140" style=" position:absolute; top:68px; left:148px; width:600px; height:200px;  z-index:5;">
            <img src="Untitled_1/goim005.jpg" width=600 height=200 border=0 alt="">
          </div>
 </div>

I want to get that style from the first child and append it to the parent #caro div
Then remove all the div’s around the images. (Those SGROBJ… ID’s change)
That I can then use these for a carousel
So I want to end up with:

<div id="caro" style=" position:absolute; top:68px; left:148px; width:602px; height:200px;  z-index:3;">
            <img src="Untitled_1/goim003.jpg" width=602 height=200 border=0 alt="">
            <img src="Untitled_1/goim004.jpg" width=602 height=200 border=0 alt="">
            <img src="Untitled_1/goim004.jpg" width=602 height=200 border=0 alt="">
            <img src="Untitled_1/goim005.jpg" width=600 height=200 border=0 alt="">
 </div>

Answer 1

To apply the style from the first child:

$('#caro').attr('style', $('#caro > div:first').attr('style'));

To remove the DIVs leaving the images intact:

$('#caro > div > img').unwrap();

To it all in one statement:

$('#caro').attr('style', $('#caro > div:first').attr('style')).find('div > img').unwrap();