[jquery]append 갯수 제한, remove 하나씩 삭제하기
Client Side/Jquery2023. 12. 11. 00:57
<!-- Latest compiled and minified CSS -->
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
//jquery library 추가
<script type="text/javascript">
$(function() {
var maxAppend = 1; //버튼누른 횟수 저장
$('#add').click(function(){
if (maxAppend >= 5) return; // 5번째부터는 append 안되고 return 시키기
$('div').append('<input type="file">');
maxAppend++;
});
$('#remove').click(function() {
$('input:last-child').remove();
//.remove 하면 모든 input이 삭제되어 버리기 때문에 따로 input에 class나 id를 안줬으면 last-child로 마지막 것 부터 하나씩 잡아 지워나간다.
})
});
</script>
</head>
<body>
<!-- 최대 5개까지만 -->
<div>
<input type="file">
</div>
<h1>최대 5개까지 추가 가능</h1>
<button id="add">ADD</button>
<button id="remove">REMOVE</button>
</body>
문제점
그런데 이렇게 하니까 그냥 append만 했을 때는 문제가 없었는데 remove 후 다시 5개까지 채워주려 하니 이미 버튼 클릭 횟수가 5회를 채워서 더이상 추가가 안되는 문제점을 발견.
해결
$('#remove').click 이벤트 안에 maxAppend-- 를 추가해서 클릭 횟수를 감소시켜주면 반복이 가능하다.
출처 - https://mail.naver.com/v2/read/6/57651
'Client Side > Jquery' 카테고리의 다른 글
| 간단하게 숫자만 입력할 수 있게 (0) | 2023.12.03 |
|---|---|
| 데이터 푸시 (1) | 2023.12.03 |
| select value 의 index 가져오기 (0) | 2023.10.02 |
| jQuery 기초 원소 사용 방법 (0) | 2015.06.07 |
| 클릭 이벤트 (0) | 2015.02.28 |