[jQuery] remove(), empty() 메서드 사용방법, 예제 (요소 제거와 내용 비우기)

아래 소스코드는 remove()와 empty() 메서드를 각각의 버튼으로 요소를 제거하고, 요소를 비우는 것을 확인하고 콘텐츠 추가 버튼을 통해 두 영역의 차이점을 확인하고 있습니다.

 

 

remove(), empty()

 

1. remove() 메서드

ㅇ remove() 메서드는 선택한 DOM 요소를 완전히 제거합니다. 선택한 요소와 해당 하위 요소가 모두 제거됩니다.

 

$("#myDiv").remove();

2. empty() 메서드

ㅇ empty() 메서드는 선택한 DOM 요소의 내용(하위 요소 포함)을 제거합니다. 요소 자체는 그대로 남아 있지만 내용이 비워집니다.

 

$("#myDiv").empty();

 

remove() 메서드는 선택한 요소와 그 하위 요소를 완전히 제거하고, empty() 메서드는 선택한 요소의 내용을 비웁니다.

---

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h1>Remove, Empty 예제</h1>
<!-- Remove 영역 -->    
<div>
	Remove 영역
	<div id="removeDiv">
		<p>removeDiv 영역입니다.</p>
		<button id="removeButton">Remove 실행</button>
	</div>
</div>

<hr> <!-- 수평선 추가 -->

<!-- Empty 영역 -->
<div>
	Empty 영역
	<div id="emptyDiv">
		<p>emptyDiv 영역입니다.</p>
		<button id="emptyButton">Empty 실행</button>
	</div>
</div>

<hr> <!-- 수평선 추가 -->

<!-- 콘텐츠를 추가할 입력 필드와 버튼 -->
<input type="text" id="contentInput" placeholder="추가할 내용을 입력하세요">
<button id="addButton">내용 추가 테스트</button>

<script>
	//Remove Content" 버튼을 클릭하면 #removeDiv를 완전히 제거합니다.
	$("#removeButton").click(function() {
		$("#removeDiv").remove();
	});
	 //Empty Content" 버튼을 클릭하면 #emptyDiv의 내용만 비웁니다.
	$("#emptyButton").click(function() {
		$("#emptyDiv").empty();
	});

	//버튼을 클릭하면 removeDiv, emptyDiv 영역에 내용을 추가합니다.
	$("#addButton").click(function() {
		var content = $("#contentInput").val();
		$("#emptyDiv").append("<p>" + content + "</p>");
		$("#removeDiv").append("<p>" + content + "</p>");
	});
</script>

 

1. Remove 영역
ㅇ remove() 메서드는 Remove 실행 버튼을 클릭하면 #removeDiv 영역을 완전히 제거합니다. #removeDiv와 그 하위 내용이 모두 삭제됩니다.

2. Empty 영역
ㅇ empty() 메서드는 Empty 실행 버튼을 클릭하면 #emptyDiv의 내용만 비웁니다. #emptyDiv 자체는 그대로 남아 있지만 내용만 지워집니다.

3. 콘텐츠 추가
ㅇ 내용 추가 테스트 버튼을 클릭하면 #emptyDiv와 #removeDiv 영역에 입력 필드에 입력한 내용을 <p> 요소로 추가합니다. Remove 영역은 제거되면 내용이 추가가 안되는 걸 확인하실 수 있습니다.

 

---

 

소스코드 실행화면

 

remove, empty 실행 안하고 내용 추가

 

remove, empty 실행 하고 내용 추가