.unwrap()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

unwrap 메서드는 지정한 요소의 부모를 없앱니다.
부모요소를 없애기만 하고 자신은 그대로 유지됩니다.
감싸안고 있는것을 벗긴다라고 생각하면 되겠네요 ^^

+_+
예제 1
기본 예제 - 사진을 둘러싼 요소 하나씩 벗기기(?)
보기
사진을 계속 클릭해 보세요~!

소스
<style type="text/css">
    .css_test img {
        cursor : pointer;
        margin : 5px;
        width : 250px;
    }
    .css_test div {
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
    }
</style>

사진을 계속 클릭해 보세요~!<br><br>

<div class="css_test">
    <div>
        <img src="http://cfile4.uf.tistory.com/image/24242C3D552F50A61B6AF8" onclick="j_test(this)" />
    </div>
    <div>
        <div>
            <img src="http://cfile5.uf.tistory.com/image/223D2D4C550B9B3B0DFBD9" onclick="j_test(this)" />
        </div>
    </div>
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).unwrap();
    }
</script>
관련 CSS
jQuery

- 이미지를 계속 클릭하면 페이지가 파괴될 것입니다.
- 감싸고 있는 부모요소들을 하나씩 없애기 때문에 결국 레이아웃이 깨지게 되죠.

$( 셀렉터 ).unwrap( )  -  지정한 셀렉터의 부모요소를 벗깁니다.

반대 메서드 : .wrap()

+ 관련 jQuery +
jQuery 홈페이지 .unwrap() API 문서 : http://api.jquery.com/unwrap/