삭제 메소드 : empty / remove

조수경·2021년 11월 25일
0

HTML

목록 보기
85/96

<!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>
profile
신입 개발자 입니다!!!

0개의 댓글