jQuery 강좌 | Methods > .remove()

.remove()는 선택한 요소를 HTML 문서에서 제거합니다. 태그만 제거하는 게 아니라 태그 안의 내용까지 사라지게 합니다.

문법

.remove( [selector] )

특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 p 요소 중 rm을 클래스 값으로 가진 것을 제거할 때는 다음과 같이 합니다.

$( 'p' ).remove( '.rm' );

물론 다음과 같이 해도 같은 결과를 가져옵니다.

$( 'p.rm' ).remove();

상황에 따라 적절한 방식으로 사용하면 됩니다.

예제

http://book.cmsfactory.net/jQuery/V01/Methods/remove.html

버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .remove()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'h1' ).remove( '.rm' );
        } );
      } );
    </script>
  </head>
  <body>
    <button>Click to Remove h1 Heading</button>
    <h1 class="rm">Lorem ipsum dolor.</h1>
  </body>
</html>
Category

Created on 2014-02-23 16:37 | Updated on 2015-07-17 01:15

이 글을 공유하기

Kakao