[JQuery] 요소 삭제하기 - remove(); empty();

Jquery

[JQuery] 요소 삭제하기 - remove(); empty();

개발자하소서 2022. 1. 27. 20:10

728x90

SMALL

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>


<style>
p {
	background-color: pink;
	}

.container {
	height: 80px;
	width: 200px;
	border: 3px dotted red;
	}
}
</style>
<script>
	// <==== dom에 요소 삭제하기 ===>
	// remove() :선택된요소를 포함, 하위요소들을 제거 == 요소자체를 지운다
	// empty() : 선택된 요소의 하위요소들만 제거 == 요소자체가 아니라 내용을 지운다

	// remove();
	$(document).ready(function() {
		$("#button1").click(function() { 
			$(".container").remove();  
		});

	});
	
	// empty();
	$(document).ready(function() {
		$("#button2").click(function() {
			$(".container").empty();
		});

	});
</script>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<button id="button1">remove()</button>
	<button id="button2">empty()</button>
	<br />
	<div class="container">
		<p class="hello">hello</p>
		<p class="goodbye">goodbye</p>

	</div>


</body>
</html>

📌 화면 출력

- remove() 를 사용하면 요소 자체가 사라진다

- empty() 를 사용하면 요소의 내용이 사라진다

728x90

LIST