※ 1. remove()사용 - (본인 후손객체까지 모두 삭제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
※ 1. 실행화면
※ 2. remove()사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// 본인뿐만아니라 후손객체까지 모두 삭제
//$("#div1").remove();
// 본인 text content와 후손객체 모두 삭제
// 단, 본인은 삭제 안됨
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
※ 2. 실행화면
'jQuery 수업' 카테고리의 다른 글
jQuery-18(removeClass()사용) (0) | 2020.02.19 |
---|---|
jQuery-17(addClass()사용) (0) | 2020.02.19 |
jQuery-14(add적용 - append()) (0) | 2020.02.19 |
jQuery-13(set적용-attr()) (0) | 2020.02.19 |
jQuery-12(set적용- text(), html()) (0) | 2020.02.19 |