.empty()
선택한 요소의 하위 요소를 제거합니다.
.empty()
선택한 요소의 하위 요소를 제거합니다.
문법
$("선택자").empty();
정의
- .empty() 선택한 요소의 하위 요소를 제거합니다.
비교(Compare)
- 선택한 요소를 삭제하고 싶다면(데이터 및 이벤트 포함) .remove() 메서드를 사용합니다.
- 선택한 요소의 컨텐츠만 삭제하고 싶다면 .empty() 메서드를 사용합니다.
- 선택한 요소를 삭제하고 싶다면(데이터 및 이벤트 불포함) .detach() 메서드를 사용합니다.
- 선택한 요소의 부모 요소를 삭제하고 싶다면 .unwrap() 메서드를 사용합니다.
Sample1 
.remove() .empty() .detach() : 요소를 삭제하는 예제입니다.
결과
속성(Attributes)
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$(".list1 li").remove();
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1 li").empty();
});
$(".choice1 .btn3").on("click", function(e){
e.preventDefault();
$(".list1 li").detach();
});html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다. <em>.empty()</em></li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
.bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다. <em>.empty()</em></li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a><br>
<a href="#" class="btn1">클릭하면 리스트를 <em>.remove()</em> 삭제합니다.</a><br>
<a href="#" class="btn2">클릭하면 리스트를 <em>.empty()</em> 삭제합니다.</a><br>
<a href="#" class="btn3">클릭하면 리스트를 <em>.detach()</em> 삭제합니다.</a><br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").on("click", function(e){
e.preventDefault();
$(".list1 li").remove();
$(".list1 ul").append().html("<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li><li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li><li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li><li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
});
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$(".list1 li").remove();
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1 li").empty();
});
$(".choice1 .btn3").on("click", function(e){
e.preventDefault();
$(".list1 li").detach();
});
</script>
</body>
</html>호환성(Compatibility)
| 메서드 | 버전 |  |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| empty() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
| jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
