📌 jQuery – .empty() vs .remove()
jQuery에서는 DOM 요소를 삭제할 때 두 가지 대표적인 메서드가 있습니다:
.empty() 와 .remove(). 비슷해 보이지만 동작은 다릅니다.
✅ 1. .empty()
- 선택한 요소 내부의 자식 요소만 모두 제거합니다.
- 요소 자체(<div>)는 남아 있기 때문에, 이후에 다시 내용을 추가할 수 있습니다.
$('#btnEmpty').click(function(){
$('div').empty(); // div 안의 내용만 삭제
$('div').append("<b>Hi!!</b>"); // 다시 내용 추가 가능
});
👉 결과:
<div> 박스는 유지되고 안에 들어있던 <p> 태그들이 사라집니다. 그리고 "Hi!!"가 새로 들어갑니다.
✅ 2. .remove()
- 선택한 요소 자체를 DOM에서 완전히 제거합니다.
- 요소 자체가 없어지기 때문에, 그 이후에는 jQuery로 다시 접근할 수 없습니다.
$('#btnRemove').click(function(){
$('div').remove(); // div 자체를 삭제
$('div').append("<b>Hi!!</b>"); // ❌ 이미 삭제돼서 실행 안 됨
});
👉 결과:
<div> 태그 자체가 사라지므로, 이후에 $('div')를 다시 불러도 더 이상 존재하지 않아 아무 동작도 하지 않습니다.
✅ 차이점 한눈에 정리
| 메서드 | 설명 | 요소 자체 유지 여부 | 이후 내용 추가 가능 여부 |
| .empty() | 자식 요소만 제거 | O (남음) | O (가능) |
| .remove() | 요소 자체 삭제 | X (없어짐) | X (불가능) |
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex11_empty_remove.html</title>
<style type="text/css">
div {
background-color: Yellow;
width: 30%;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnEmpty').click(function(){
$('div').empty(); // div 비우기
$('div').append("<b>Hi!!<b>")
})
$('#btnRemove').click(function(){
$('div').remove(); // div 영구삭제
$('div').append("<b>Hi!!<b>")
})
})
</script>
</head>
<body>
<div>
<p>jQuery</p>
<p>Ajax</p>
</div>
<input type="button" id="btnEmpty" value="영역의 내용 삭제" />
<br />
<input type="button" id="btnRemove" value="영역 자체를 삭제" />
</body>
</html>'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 08. jQuery_change() (1) | 2025.09.09 |
|---|---|
| 07. jQuery_bind() (1) | 2025.09.09 |
| 05. jQuery에서 children() vs find() 차이 정리 (0) | 2025.09.08 |
| 04. jQuery 요소(Element)의 속성(attribute)을 가져오고, 설정하고, 삭제 (0) | 2025.09.08 |
| 03. jQuery로 테이블 점수 색상 처리 & 총합 계산 (0) | 2025.09.08 |