
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#emp').on('click', function(){
$('#result1').empty();
})
$('#rem').on('click', function(){
$('#result2').remove();
})
})
</script>
<style>
.box div{
background : yellow;
}
</style>
</head>
<body>
<div class = "box">
empty : 대상 selector의 자식요소와 내용을 지우기<br>
remove : 대상 selector를 포함한 자식요소와 내용을 지우기<br>
<br>
<button type = "button" id="emp">empty</button>
<button type = "button" id="rem">remove</button>
<div id = "result1">
<p>무궁화 꽃이 피었습니다</p>
</div>
<div id = "result2">
<p>무궁화 꽃이 피었습니다</p>
</div>
</div>
</body>
</html>