jQuery 공작소 : .remove()

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

remove 메서드는 해당요소를 제거합니다.

예제 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).remove()" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="$(this).remove()" />
    <img src="//superkts.com/img/css/dog021.gif" onclick="$(this).remove()" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="$(this).remove()" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="$(this).remove()" />
</div>
관련 CSS
jQuery

$( 셀렉터 ).remove()  -  셀렉터에 해당하는 요소를 제거합니다.

예제에서는 onclick 이벤트를 사용하여 자신을 제거하도록 해보았습니다.
$( this ).remove()  -  자신을 제거한다. (좀 무섭네요)

예제 2
애니메이션 효과로 조금 더 멋지게
보기
개를 클릭해 보세요~!

소스
<style type="text/css">
    .css_test img {
        cursor : pointer;
        position : relative;
    }
</style>

개를 클릭해 보세요~!<br><br>

<div class="css_test">
    <img src="//superkts.com/img/css/dog060.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/dog021.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/dog061.gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).animate( { top:'-=200', opacity:0 }, 200, function(){
            $(this).remove(); // 애니메이션이 끝나면 제거
        });
    }
</script>
관련 CSS
jQuery

- 애니메이션 효과를 이용해서 좀 더 동적으로 만들어 보았습니다.

관련 메서드 : .animate()

예제 3
셀렉터로 필터링 하여 제거하기
보기
버튼을 클릭해 보세요~!



소스
버튼을 클릭해 보세요~!<br><br>
<button type="button" onclick="$('.css_test img').remove('[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

remove( 셀렉터 )  -  지정한 셀렉터에 해당하는 요소만 제거합니다.

$( '.css_test  img' ).remove( '[src*=021]' )
- 클래스명이 css_test 인 요소의 img 중 src 속성값에 021 문자열이 있는것만 제거합니다.
- 021 문자열이 있는 이미지는 검은개 입니다.

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