이번장에서는 jQuery 중에서 remove 즉 지운다는 의미인데 이 함수에 대해서 알아보겠습니다.
jQuery remove 함수중엔 remove()와 empty() 있습니다.
remove() : 선택한 모든 요소를 지웁니다.
empty() : 선택한 자식 요소를 지웁니다.
예제를 보면 이해가 더 빠를겁니다.
간단예제(사용법)
$("#div1").remove();
$("#div1").empty();
remove() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
div 문장입니다.
<p>div 첫번째 문장</p>
<p>div 두번째 문장.</p>
</div>
<br>
<button>Remove div</button>
</body>
</html>
// Remove div 버튼을 클릭하면 id div1의 모든 값을 지웁니다.
empty() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
div 문장입니다.
<p>div 첫번째 문장</p>
<p>div 두번째 문장.</p>
</div>
<br>
<button>empty div</button>
</body>
</html>
// empty div 버튼을 클릭하면 remove() 함수와 틀리게 div1 중에서 안의 값만 지운것을 확인할 수 있습니다.
만약 remove 함수를 사용할 경우 remove(), empty() 어떤 역할을 하는지 잘 파악한 후에 적용하면 되겠습니다.
다음 장에서는 jQuery css classes에 대해서 알아보겠습니다.
