jQuery API 정복 - 텍스트 비우기, empty()

.empty()

원문 링크 http://api.jquery.com/empty/

.empty()Returns : jQuery

개요 : 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 에 있는 내용임을 밝힙니다.

Comment List

Write Comment