jQuery 공작소 : .detach()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
detach 메서드는 지정한 요소를 제거합니다.
예제 1
기본 예제 - 클릭한 이미지 제거해 보기
보기
개를 클릭해 보세요~!
소스
<style type="text/css">
.css_test img {
cursor : pointer;
}
</style>
개를 클릭해 보세요~!<br><br>
<div class="css_test">
<img src="//superkts.com/img/css/dog060.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog021.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
</div>
.css_test img {
cursor : pointer;
}
</style>
개를 클릭해 보세요~!<br><br>
<div class="css_test">
<img src="//superkts.com/img/css/dog060.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog021.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
<img src="//superkts.com/img/css/dog061.gif" onclick="$(this).detach()" />
</div>
관련 CSS
jQuery
$( 셀렉터 ).detach() - 셀렉터에 해당하는 요소를 제거합니다.
예제에서는 onclick 이벤트를 사용하여 자신을 제거하도록 해보았습니다.
$( this ).detach() - 자신을 제거한다. (좀 무섭네요)
예제 2
셀렉터로 필터링 하여 제거하기
보기
버튼을 클릭해 보세요~!
소스
버튼을 클릭해 보세요~!<br><br>
<button type="button" onclick="$('.css_test img').detach('[src*=021]')">검은개 나와!</button><br><br>
<div class="css_test">
<img src="//superkts.com/img/css/dog021.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/dog021.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
</div>
<button type="button" onclick="$('.css_test img').detach('[src*=021]')">검은개 나와!</button><br><br>
<div class="css_test">
<img src="//superkts.com/img/css/dog021.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/dog021.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
</div>
jQuery
detach( 셀렉터 ) - 지정한 셀렉터에 해당하는 요소만 제거합니다.
$( '.css_test img' ).detach( '[src*=021]' )
- 클래스명이 css_test 인 요소의 img 중 src 속성값에 021 문자열이 있는것만 제거합니다.
- 021 문자열이 있는 이미지는 검은개 입니다.
+ 관련 jQuery +
jQuery 홈페이지 .detach() API 문서 : http://api.jquery.com/detach/