요구 사항
- 초기 필드 개수 설정 가능 (예: 3개 기본 생성)
- [추가] 버튼 클릭 시 필드 추가 가능
- [삭제] 버튼 클릭 시 해당 필드 삭제 가능
- 최소 필드 개수 유지 (예: 2개 이하로는 삭제 불가)
jQuery 코드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 동적 필드 추가/삭제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.field-container {
margin-bottom: 10px;
}
.remove-btn {
margin-left: 10px;
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<button id="add-field">추가</button>
<div id="field-wrapper">
<!-- 초기 필드가 생성될 영역 -->
</div>
<script>
$(document).ready(function () {
let count = 0;
let minFields = 2; // 최소 필드 개수
let initialFields = 3; // 초기 필드 개수
// 초기 필드 생성 함수
function createInitialFields() {
for (let i = 0; i < initialFields; i++) {
addField();
}
}
// 필드 추가 함수
function addField() {
count++;
$("#field-wrapper").append(`
<div class="field-container" id="field-${count}">
<input type="text" name="field[]" placeholder="입력값 ${count}" />
<span class="remove-btn" data-id="${count}">❌</span>
</div>
`);
}
// 필드 삭제 함수
function removeField(id) {
if ($(".field-container").length > minFields) {
$("#field-" + id).remove();
} else {
alert(`최소 ${minFields}개의 필드는 유지해야 합니다.`);
}
}
// 초기 필드 생성
createInitialFields();
// 추가 버튼 클릭 이벤트
$("#add-field").click(function () {
addField();
});
// 삭제 버튼 클릭 이벤트 (이벤트 위임)
$("#field-wrapper").on("click", ".remove-btn", function () {
let id = $(this).data("id");
removeField(id);
});
});
</script>
</body>
</html>기능 설명
- 초기 필드 3개 생성 (initialFields = 3;)
- 최소 필드 개수 2개 유지 (minFields = 2;)
- 필드 추가 버튼을 누르면 새로운 필드가 추가됨
- 삭제 버튼을 눌러 필드를 삭제할 수 있음
단, 최소 필드 개수(2개) 이상은 유지해야 함
#jquery #필드추가 #필드삭제
반응형
'프로그램' 카테고리의 다른 글
| jQuery에서 동적으로 추가된 <input> 요소에서 외부 함수를 호출 (0) | 2025.03.29 |
|---|---|
| iframe이나 동적으로 생성한 div 내부에서 마우스 좌표값을 얻는 방법 (0) | 2025.03.25 |
| jquery 부모페이지에서 아이프레임 특정 클래스에 클래스 추가 및 여러 속성 값 추가 하기 (0) | 2025.03.23 |
| JavaScript에서 랜덤 난수를 생성하는 방법 (0) | 2025.03.21 |
| JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경 (0) | 2025.03.19 |
댓글