.empty()
원문 링크 
http://api.jquery.com/empty/
개요 : DOM에서 조건에 일치하는 요소들의 자식 노드들을 제거합니다.
- .empty()
이 함수는 자식 요소(자손까지 포함한) 뿐만 아니라 일치하는 요소 내의 텍스트를 제거합니다. DOM 스펙에 의해 요소 내의 텍스트 문자열은 그 요소의 자식 요소로 간주되기 때문입니다.
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
타겟을 정해서 제거하려면
$('.hello').empty();스크립트의 결과는 Hello 요소의 텍스트를 제거하게 됩니다.
<div class="container"> <div class="hello"></div> <div class="goodbye">Goodbye</div> </div>
만약 <div class="hello"> 내부에 중첩되는 요소가 있다면, 그것들도 역시 제거됩니다.
메모리 누수(memory leak)를 피하기 위해 jQuery는 요소를 제거하기 전 자식 요소들의 데이터(data)와 이벤트 처리기(event handlers)를 제거합니다.
예 제
모든 문단(p)의 자식 노드(텍스트 노드를 포함하여)들을 제거합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>
<button>Call empty() on above paragraph</button>
<script>
$("button").click(function () {
$("p").empty();
});
</script>
</body>
</html>
미리보기
버튼 누르면 제거됩니다. 다시 눌러봐도 다시 불러지지가 않아요. detach() 와 다른점이겠네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 뒤에 추가하기, insertAfter() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - padding을 포함한 넓이 제어, innerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - padding 포함 높이 제어, innerHeight() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 높이 제어, height() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 제거, detach() (2) | 2011.11.22 |
| jQuery API 정복 - 속성을 제어, css() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 복사하기, clone() (0) | 2011.11.22 |
| jQuery API 정복 - 앞에 추가하기, before() (1) | 2011.11.22 |