이번장에서는 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에 대해서 알아보겠습니다.
'jQuery > jQuery HTML' 카테고리의 다른 글
| jQuery classes css() (0) | 2013.05.23 |
|---|---|
| jQuery CSS Classes (0) | 2013.05.23 |
| jQuery Add Elements (0) | 2013.05.21 |
| jQuery html Set text(), html(), val(), attr() (0) | 2013.05.20 |
| jQuery HTML Get Content and Attributes text(), html(), val(), attr() (1) | 2013.05.17 |
