.empty ()

설명 : 일치하는 요소 집합의 모든 자식 노드를 DOM에서 제거합니다.

이 메소드는 자식 (및 기타 자손) 요소뿐만 아니라 일치하는 요소 세트 내의 텍스트도 제거합니다. 이것은 DOM 사양에 따라 요소 내의 텍스트 문자열이 해당 요소의 자식 노드로 간주되기 때문입니다. 다음 HTML을 고려하십시오.

div class="container">

  <div class="hello">Hello</div>

  <div class="goodbye">Goodbye</div>

</div>

제거 할 요소는 모두 타겟팅 할 수 있습니다.

$( ".hello" ).empty();

이렇게하면 Hello텍스트가 삭제 된 DOM 구조가 생성 됩니다.

div class="container">

  <div class="hello"></div>

  <div class="goodbye">Goodbye</div>

</div>

내부에 중첩 된 요소 <div class="hello">가 여러 개 있으면 제거됩니다.

메모리 누수를 피하기 위해 jQuery는 요소 자체를 제거하기 전에 자식 요소에서 데이터 및 이벤트 핸들러와 같은 다른 구조를 제거합니다.

데이터 또는 이벤트 핸들러를 파괴하지 않고 요소를 제거하려는 경우 (나중에 다시 추가 할 수 있도록) .detach()대신 대신 사용하십시오.

예:

모든 단락에서 모든 하위 노드 (텍스트 노드 포함)를 제거합니다.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>empty demo</title>

  <style>

  p {

    background: yellow;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<p>

  Hello, <span>Person</span> <em>and person</em>.

</p>

<button>Call empty() on above paragraph</button>

<script>

$( "button" ).click(function() {

  $( "p" ).empty();

});

</script>

</body>

</html>