jquery 자식 노드 전부 삭제

.empty()

.empty()Returns: jQuery

Description: Remove all child nodes of the set of matched elements from the DOM.

version added: 1.0.empty()
- This method does not accept any arguments.

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

We can target any element for removal:

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

This will result in a DOM structure with the Hello text deleted:

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

If we had any number of nested elements inside <div class="hello">, they would be removed, too.

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

Example:

Removes all child nodes (including text nodes) from all paragraphs

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>empty demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="//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>

Demo

[출처] jquery 자식 노드 전부 삭제|작성자 의지의 차이

$.getJSON / $.each / .push (0)	2015.02.03
[jQuery] jQuery Quick API (0)	2015.02.03
jQuery - name으로 접근하기 (0)	2014.10.15
간편 ajax 통신 - jQuery.getJSON() (0)	2014.10.15
[jQuery] jQuery ajax form 값 전부 넘기기 (serialize 사용) (0)	2014.09.05
[jQuery] hide, show예제 (0)	2014.09.05
[jQuery]change() 이벤트 (0)	2014.09.05
jQuery 롤오버 (0)	2014.08.19

$.getJSON / $.each / .push (0)

2015.02.03

[jQuery] jQuery Quick API (0)

2015.02.03

jQuery - name으로 접근하기 (0)

2014.10.15

간편 ajax 통신 - jQuery.getJSON() (0)

2014.10.15

[jQuery] jQuery ajax form 값 전부 넘기기 (serialize 사용) (0)

2014.09.05

[jQuery] hide, show예제 (0)

2014.09.05

[jQuery]change() 이벤트 (0)

2014.09.05

jQuery 롤오버 (0)

2014.08.19

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28