jQuery dynamicInput 플러그인으로 파일·텍스트 입력필드 동적 추가/삭제 구현하기 폼에 첨부파일이나 텍스트 입력 필드를 동적으로 추가/삭제 해야 할 때, 매번 HTML을 복붙하거나 인덱스를 신경 쓰는 것은 상당히 번거롭습니다. 이 글에서는 jQuery로 구현한 dynamicInput 플러그인을 이용해서 추가 , 삭제 버튼만으로 입력 필드를 편리하게 관리하는 방법을 정리해 보겠습니다. 1. dynamicInput 플러그인 개념 $.fn.dynamicInput 은 jQuery 플러그인 형태로 구현된 함수로, 다음과 같은 기능을 제공합니다. 파일 입력( type="file" ) 또는 텍스트 입력( type="text" )을 동적으로 추가/삭제 최대 개수(max) 설정으로 무한 추가 방지 기존 첨부파일 리스트( viewData )를 보여주고, 삭제 버튼으로 논리 삭제 처리 실제 삭제 대상은 hidden 필드 값으로 서버에 전송 기본 아이디어는 다음과 같습니다. 대상 영역에 플러그인을 초기화한다. ( $("#addFileZone").dynamicInput({...}) ) 플러그인 내부에서 추가/삭제 버튼 과 입력 필드 그룹 을 자동으로 생성한다. 버튼 클릭 시, 설정에 따라 입력 필드 DOM을 추가하거나 삭제한다. 2. 개선된 dynamicInput 플러그인 코드 아래 코드는 파일 타입만 지원하던 기존 코드 에서 확장해서, 첨부파일( file )과 텍스트( text ) 모두 처리할 수 있도록 보완한 버전입니다. $.fn.dynamicInput = function(opt){ var t = $(this); // 플러그인을 적용할 대상 컨테이너 var btnBody = $(document.createElement('span')); // 추가/삭제 버튼 영...