.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://cfile22.uf.tistory.com/image/24088C3354D74FB505499F" onclick="j_test(this)" />
    </div>
    <div>
        <div>
            <img src="http://cfile9.uf.tistory.com/image/267D3750550B9B3D0DE737" 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/