테스트 사이트 - 개발 중인 베타 버전입니다

.empty ()

· 8년 전 · 1595

.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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15895
15894
15893
15888
15887
15886
15885
jQuery .end()
15884
15883
jQuery .each()
15882
jQuery .die ()
15881
15880
15878
15877
15876
15874
15873
15872
15871
15866
15865
15864
15863
15862
15861
15859
15858
15857
15856
15855