.remove()
원문 링크 
http://api.jquery.com/remove/
개요 : 조건에 맞는 요소를 DOM에서 제거합니다.
- .remove( [selector] )
- selector 제거할 요소 집합을 찾아내기 위한 선택자
.empty() 와 .remove() 함수는 DOM에서 요소를 걷어내는 점에서 비슷합니다. .remove()를 사용하면 요소 자체 뿐만 아니라 그 안에 있는 모든 요소들이 제거됩니다. 추가적으로 요소들과 연관된 모든 이벤트와 jQuery 데이터들도 모두 제거됩니다. 데이터와 이벤트를 요소에서 제거하지 않으려면 .detach() 를 사용해야 합니다.
아래 HTML을 보시죠.(또 나왔네 헐)
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
특정 요소를 제거할 수 있습니다.
$('.hello').remove();아래 처럼 <div> 요소를 DOM 구조에서 제거하게 됩니다.
<div class="container"> <div class="goodbye">Goodbye</div> </div>
만약 <div class="hello"> 안에 다른 요소들이 있었다면 그것들도 제거됩니다. jQuery 데이터와 이벤트들도 제거됩니다.
함수의 인자로 선택자를 사용할 수도 있습니다. 예를 들어, 우리는 위의 스크립트를 아래처럼 작성할 수도 있습니다.
$('div').remove('.hello');결과는 같습니다.
<div class="container"> <div class="goodbye">Goodbye</div> </div>
예 제
DOM에서 모든 문단(p)을 제거합니다.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<script>
$("button").click(function () {
$("p").remove();
});
</script>
</body>
</html>미리보기
버튼 클릭해 보셔요. 노란 배경색 p부분만 삭제되요.
예 제
DOM에서 "Hello"를 포함한 모든 문단(p)을 제거합니다. 유사하게는 $("p").filter(":contains('Hello')").remove()가 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove(":contains('Hello')") on paragraphs</button>
<script>
$("button").click(function () {
$("p").remove(":contains('Hello')");
});
</script>
</body>
</html>
미리보기
위와는 달리 Hello 가 들어간 부분만 삭제됩니다.
제거할 일 많은데 선택자랑 잘 사용하면 좋을 것 같습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 요소 바꾸기, replaceAll() (2) | 2011.11.22 |
|---|---|
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |
| jQuery API 정복 - 클래스 제거, removeClass() (1) | 2011.11.22 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기2, prependTo() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() (0) | 2011.11.22 |
| jQuery API 정복 - 상대 좌표 구하기, position() (0) | 2011.11.22 |
| jQuery API 정복 - border 포함 넓이 구하기, outerWidth() (0) | 2011.11.22 |