AdminLTE 템플릿 select 선택 하여 input 컴포넌트 추가, 삭제 하기

<select class="form-control" id="selectBox">
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<div class="form-group" id="inputContainer"></div>

<script>
  var input;

  document.getElementById("selectBox").addEventListener("change", function() {
    var selectValue = this.value;
    if (!selectValue) {
      if (input) {
        document.getElementById("inputContainer").removeChild(input);
        input = null;
      }
      return;
    }

    if (!input) {
      input = document.createElement("input");
      input.classList.add("form-control");
      input.placeholder = "Enter text here";
      document.getElementById("inputContainer").appendChild(input);
    }
  });
</script>

동적으로 생성된 입력 구성 요소를 추적하기 위해 글로벌 입력 변수를 사용.

선택 상자 값이 변경되면 .value를 사용하여 값을 얻고, 값이 비어 있으면 입력 구성 요소가 생성되었는지 확인.

값이 있는 경우 removeChild 메서드를 사용하여 inputContainerdiv에서 제거하고 입력 변수를 null로 설정.

값이 비어 있지 않으면 입력 구성 요소가 생성되었는지 확인.