[jQuery] 제이쿼리 삭제 관련 메서드
- removeAttr() : 선택한 요소의 특정 속성을 제거
ex) $("img").removeAttr("alt") : img 요소의 alt 속성을 제거
- empty() : 하위 요소를 제거
ex ) $("div").empty() : div 요소의 하위 요소 모두 제거
- remove() : 선택한 요소 삭제
ex ) $("div").remove() : div 요소 완전히 삭제
- detach() : 선택한 요소 삭제 / 원하는 위치에 다시 삽입 가능
ex) $("p").detach()
-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<style>
div{border: 1px solid #ddd; margin: 10px; width: 100px; height: 30px;}
</style>
<script src="./js/jquery-3.6.0.js"></script>
<script>
$(function(){
let detachDiv = ""
$("button:eq(0)").click(function(){ // 첫 번째 버튼 누르면
$("#m1 a").removeAttr("href"); // #m1 a 태그의 속성 "href" 삭제
$("#m2").empty(); // #m2 div의 자식요소 모두 삭제
$("#m3").remove(); // #m3 div 완전히 삭제
detachDiv = $("#m4").detach(); // #m4 div 삭제
})
$("button:eq(1)").click(function(){ // 두 번째 버튼 누르면
detachDiv.insertAfter("#m2") // #m4 div 다시 삽입
})
})
</script>
</head>
<body>
<div id="m1"><a href="#">링크</a></div>
<div id="m2"><span>내용1</span></div>
<div id="m3"><span>내용2</span></div>
<div id="m4"><span>내용3</span></div>
<button>삭제</button>
<button>detach</button>
</body>
|
<실행결과>
'삭제' 버튼 클릭 >
- 첫 번째 div의 a 태그 링크 사라짐
- 두 번째 div 자식 요소 모두 사라짐(그 결과 div만 남아 브라우저 상에서는 테두리만 보인다)
- 세 번째 div 완전히 삭제(위의 empty와는 다르게 div가 통째로 삭제되는거라 브라우저에 보이지 않는다)
- 네 번째 div 삭제(detach)
'detach' 버튼 클릭 >
앞에서 detach() 함수로 인해 삭제되었던 네 번째 div 다시 삽입
댓글