jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" onclick="j_test(this)" />
</div>
<div>
<div>
<img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" onclick="j_test(this)" />
</div>
</div>
</div>
<script type="text/javascript">
function j_test(o){
$(o).unwrap();
}
</script>
.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="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" onclick="j_test(this)" />
</div>
<div>
<div>
<img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" 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/