반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
// .detach() 지정한 요소를 포함한 하위 요소 모두 제거
$("#detachBtn").click(function() {
$("#target").detach();
});
// .empty 지정한 요소의 하위 요소를 제거
$("#emptyBtn").click(function() {
$("#target").empty();
});
//remove 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거
$("#removeBtn").click(function() {
$("#target").remove();
});
});
</script>
<title>Document</title>
</head>
<body>
<fieldset style="height:150px; position:relative;">
<legend>Target</legend>
<div
id="target"
style="background-color:gray; height:80px; width:80%; position:relative; left:10%; top:10px"
>
<div
id="innerTarget"
style="background-color:green; height:50px; width:50%; position:absolute; left:25%; top:20%;"
></div>
</div>
</fieldset>
<input type="button" id="detachBtn" value="detach" />
<input type="button" id="emptyBtn" value="empty" />
<input type="button" id="removeBtn" value="remove" />
</body>
</html>
반응형
'2020 > JQuery' 카테고리의 다른 글
| JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거) (0) | 2020.02.28 |
|---|---|
| JQuery unbind(이벤트해제) (0) | 2020.02.28 |
| JQuery replaceWith, replaceAll, 요소 대체하기 (0) | 2020.02.28 |
| JQuery 속성 값 입력 (0) | 2020.02.28 |
| JQuery selectbox 확인 (0) | 2020.02.28 |
꽃꽂이하는개발자