노드를 추가한다면 삭제할 수도 있다.
해당 노드를 삭제하거나 전체 노드를 삭제할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node remove</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
var $menu = $("ul.menu");
var $base = $("ul.menu li.select");
$("ul.menu li").click(function(){
// 지정한 노드 삭제
$(this).remove();
});
$("#remove").click(function(){
$menu.children().remove();
});
});
</script>
</head>
<body>
<input type="button" id="remove" value="전체 자식 노드 삭제">
<ul class="menu">
<li id="menu1">Menu#1</li>
<li id="menu2">Menu#2</li>
<li id="menu3" class="select">Menu#3(class = "select")</li>
<li id="menu4">Menu#4</li>
<li id="menu5">Menu#5</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 노드 추가, 수정, 삭제, 이동 실습 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 수정하기 (0) | 2020.08.04 |
| [jQuery] 노드 움직이기 (0) | 2020.08.04 |
| [jQuery] 노드 추가하기 (0) | 2020.08.03 |
| [jQuery] 노드 실습 (0) | 2020.08.03 |
