JSFiddle - React, Tailwind, and code Playground

by hogyunlim

HTML

<div class="col-sm-12 line_st02 wrap_add_input situation">
      <span class="inputwp input_wrap_5" style="width: 18%">
        <label for="is_popup" class="label">팝업알림 띄울 상황선택
          <button type="button" class="btn btn_add" onclick="add_situation();">
          추가
          </button>
        </label>
      </span>

      <span>
        <select name="wr_situation" class="wr_situation">
          <option value="enteringHome">홈 화면 진입 시 띄움</option>
          <option value="completePayment">결제완료 후 띄움</option>
          <option value="completeAttendance">입장완료 후 띄움</option>
        </select><a href="#" class="remove_btn"><img src="https://www.clipartmax.com/png/small/140-1401229_free-high-quality-remove-icon-image-delete-data.png"/></a>
      </span>
      <span>
        <select name="wr_situation" class="wr_situation">
          <option value="enteringHome">홈 화면 진입 시 띄움</option>
          <option value="completePayment">결제완료 후 띄움</option>
          <option value="completeAttendance">입장완료 후 띄움</option>
        </select><a href="#" class="remove_btn"><img src="https://www.clipartmax.com/png/small/140-1401229_free-high-quality-remove-icon-image-delete-data.png"/></a>
      </span>
      <span>
        <select name="wr_situation" class="wr_situation">
          <option value="enteringHome">홈 화면 진입 시 띄움</option>
          <option value="completePayment">결제완료 후 띄움</option>
          <option value="completeAttendance">입장완료 후 띄움</option>
        </select><a href="#" class="remove_btn"><img src="https://www.clipartmax.com/png/small/140-1401229_free-high-quality-remove-icon-image-delete-data.png"/></a>
      </span>
    </div>

CSS

.wr_situation {
  margin-left: 10px;
  display: table-cell;
}

img {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

JavaScript

function add_situation() {
  // situation 개수 파악 후 3개 이하로 유지
  if (3 <= $(".wr_situation").length) {
    alert("팝업알람 띄울 상황이 다 찼습니다.");
    return false
  }
  $(".wrap_add_input.situation").append(`<span>
<select name="wr_situation" class="wr_situation">
<option value="enteringHome">홈 화면 진입 시 띄움</option>
<option value="completePayment">결제완료 후 띄움</option>
<option value="completeAttendance">입장완료 후 띄움</option>
</select><a href="#" class="remove_btn"><img src="https://www.clipartmax.com/png/small/140-1401229_free-high-quality-remove-icon-image-delete-data.png"/></a>
</span>
`);
}

$('a.remove_btn').on('click', function(e) {
  // debugger
  // TODO 왜 추가한 애들은 안되나?.... ㅠㅠ
  console.log("a.remove_btn");
  e.preventDefault();
  // Remove the parent span element when the button is clicked
  $(this).parent('span').remove();
});


$(".wr_situation").change(() => {
  let valueArray = []; // 값을 담을 배열

  //셀렉트박스에 있는 값을 하나씩 꺼내 배열에 담는 로직
  $('select[name=wr_situation] option:selected').each(function(index){
    const value=$(this).attr('value');
    valueArray.push(value);
    console.log(index, value)
  });
  let test = $("select[name=wr_situation] option:selected").eq(2).val()
  console.log(valueArray, test);
});