[javascript] 입력 폼에서 특정 요소의 동적 생성/삭제
웹 어플리케이션에서 입력 폼을 만들 때, 특정 요소들을 동적으로 추가하거나 제거해야 하는 경우가 있습니다. 예를 들어, 사용자가 “추가” 버튼을 클릭할 때마다 새로운 입력 필드를 생성하거나 “삭제” 버튼을 클릭할 때 해당 입력 필드를 제거하는 기능을 구현해야 할 수 있습니다.
HTML 구조
먼저, HTML에서 동적으로 생성하거나 삭제할 요소들을 감싸는 부모 요소를 만들어야 합니다. 보통 <div> 태그를 사용합니다. 이 예시에서는 다음과 같은 HTML 구조를 가정하겠습니다.
<div id="container">
<!-- 동적으로 추가/삭제 될 요소들이 여기에 들어감 -->
</div>
<button id="addButton">추가</button>
JavaScript로 동적 추가/삭제 기능 구현
요소 추가
// 추가 버튼 클릭 시
document.getElementById('addButton').addEventListener('click', function() {
// 추가할 새로운 요소를 생성
var newElement = document.createElement('input');
// 필요에 따라 새로운 요소에 속성을 추가하거나 내용을 설정할 수 있음
// newElement.setAttribute('type', 'text');
// newElement.setAttribute('name', 'newInput');
// 부모 요소에 새로운 요소를 추가
document.getElementById('container').appendChild(newElement);
});
요소 삭제
// 삭제 버튼 클릭 시
document.getElementById('container').addEventListener('click', function(e) {
// 삭제할 요소를 클릭한 경우
if (e.target.tagName === 'INPUT') {
// 부모 요소에서 해당 요소를 제거
e.target.parentNode.removeChild(e.target);
}
});
위의 JavaScript 코드는 “추가” 버튼을 클릭할 때마다 새로운 입력 필드를 생성하고, 각 입력 필드의 옆에는 “삭제” 버튼이 생기면서 해당 입력 필드를 제거할 수 있도록 합니다.
이제 당신의 웹 어플리케이션에서 특정 요소를 동적으로 생성하고 삭제하는 기능을 쉽게 구현할 수 있을 것입니다.