잡동사니에도 사랑을

[JQuery] jQueryDOM - 카테고리(목록) 추가 및 삭제 본문

JAVA_EE/JQuery

[JQuery] jQueryDOM - 카테고리(목록) 추가 및 삭제

luvforjunk 2021. 10. 18. 12:35
728x90
반응형

[21.10.18] exam05(06_jQueryDOM) - 카테고리(목록) 추가 및 삭제

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="추가" />
<input type="button" value="삭제" />

<!-- 동적 요소 -->
<ul>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	var i=1;
	
	$('input:eq(0)').click(function(){ // input 태그의 0번째 방을 누르면
		var li1 = $('<li>').css('color', 'red').html('추가항목' + (i++));
		var li2 = $('<li>').css('color', 'green').html('추가항목' + (i++));
		var li3 = $('<li>').css('color', 'blue').html('추가항목' + (i++));
		
		li1.click(function(){
			$(this).remove();
		});
		
		li2.click(function(){
			$(this).remove();
		});
		
		li3.click(function(){
			$(this).remove();
		});
		
		li1.appendTo($('ul'));
		$('ul').append(li2);
		$('ul').append(li3);
	});
	
	$('input:eq(1)').click(function(){ // input 태그의 1번째(삭제) 버튼을 누르면
		$('ul').empty();
	});
});
</script>
</body>
</html>

<!-- 
A.append(B)   -- A에 B를 추가하다.
B.appendTo(A) -- B를 A에 추가하다.
 -->

 

 

[결과]

결과1
결과2

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[JQuery] 댓글 입력, 저장, 삭제하는 방법  (0) 2021.10.18
[JQuery] 아이디, 비밀번호 유효성 검사 & 일정 시간 후 서버로 정보 보내기  (0) 2021.10.18
[JQuery] 선택된 항목만 내용 표시  (0) 2021.10.18
[JQuery] 마우스 올려 서브 메뉴 펼치기 & 모든 서브 메뉴 숨기기  (0) 2021.10.18
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기  (0) 2021.10.18
'JAVA_EE/JQuery' Related Articles more