문제1.
input요소에 text입력후 추가 button 클릭시 ul요소에 목록으로 추가되게 만들기
(ul요소에 목록 추가 후 focus가 input요소로 오도록하고, 입력된 value 값은 삭제되도록 처리하세요.)
문제2.
목록에 추가된 li 클릭하면 알림 창이 뜬 후, 확인 버튼 클릭시 삭제되도록 하기
답
<body>
<!--
문제1.
input요소에 text입력후 추가 button 클릭시
ul요소에 목록으로 추가되게 만들기
(ul요소에 목록 추가 후 focus가 input요소로 오도록하고,
입력된 value 값은 삭제되도록 처리하세요.)
문제2.
목록에 추가된 li 클릭하면 알림 창이 뜬 후,
확인 버튼 클릭시 삭제되도록 하기
-->
<input type="text" id="inputMsg"/>
<button id="addBtn">추가</button>
<ul id="toDoList">
<li>test</li>
</ul>
<script src="./js/jquery-3.3.1.js"></script>
<script>
//1-1. 버튼 클릭시 동작할 수 있는 이벤트 만들기
$("#addBtn").on("click", function(){
//1-2. input요소의 value 값 갖고오기
var bringValue=$("#inputMsg").val();
//1-3. li요소 만들기/li요소에 innerText로 input요소의 value값 넣기 /content가 추가된 li 요소를 ul요소의 자식요소로 넣기
$("<li></li>").text(bringValue).appendTo("#toDoList");
$("#inputMsg").val("");
$("#inputMsg").focus();
});
//2-1 모든 li에 대해 마우스 클릭했을때 삭제
$(document).on('click', "#toDoList li", function(){
var isDelete=confirm("삭제하시겠습니까?");
if(isDelete){
$(this).remove();
}
});
/*
잘못된 코드.
addEventListener() 메소드는 특정 요소 하나에 각각 하나씩 붙는 메서드.
따라서 아래처럼 코드를 작성하면 페이지로딩시에 미리 작성되어 있던
li대해서만 기억하여 새로 추가된 li에 대해서는 동작하지 않음.
*/
// $("#toDoList li").on('click',function(){
// var a=confirm("삭제하시겠습니까?");
// if(a){
// $(this).remove();
// }
// });
</script>
</body>
'J QUERY' 카테고리의 다른 글
| 슬라이드 만들기 2 (0) | 2019.11.26 |
|---|---|
| 슬라이드 만들기1 (0) | 2019.11.26 |
| Jquery Event 연습1 (0) | 2019.11.25 |
| J query 동작 / Event / Effect (0) | 2019.11.25 |
| J Query 문법 / 옵션 (0) | 2019.11.25 |
