Удалить первый элемент, когда несколько кликов по селектбоксу

Question

, когда пользователь выбирает опцию в окне выбора, запускается новое поле.

Но предполагаемый пользователь меняет свое мнение и выбирает новую опцию, прежнее поле выбора не исчезает.

Как я могусделать «неправильный» выбор - первый выбор - исчезнуть. У меня есть рабочий пример в codepen , чтобы проиллюстрировать проблему.

Когда пользователь принимает решение с помощью «Выбрать опцию», он вызывает функцию hotelchecker, так что появляется второе окно выбора «Опция на основепредыдущий выбор ». Когда он затем пересмотрит свой выбор и снова выберет «Выбрать вариант» - как я могу предотвратить, что у меня есть несколько секунд выбора?

Вот мой HTML:

<div id="selectbox">
        <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>

              </select>
    </div>

Вот мой JS:

[let changeUse = document.getElementById("change");

changeUse.addEventListener("change", hotelchecker);

function hotelchecker() {
    if (changeUse.value == 1) {
        document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox">
        <select class = "selectstyled"
        id = "changeHotel">
        <option value="0">Option based on previuos choice</option>
        <option value="1">Further choice 1</option>
        <option value="2">Further choice 2</option>
        <option value="3">Further choice 3</option>
        </select>
        </div>
    `)
           }
    if (changeUse.value == 2) {
    document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox">
        <select class = "selectstyled"
        id = "changeHotel">
       <option value="0">Option based on previuos choice</option>
        <option value="1">Further choice 1</option>
        <option value="2">Further choice 2</option>
        <option value="3">Further choice 3</option>
        </select>
        </div>

    `)
    }
};][1]

Я думал о запуске querySelectorAll "changeHotel" и если это >0, чтобы удалить существующий элемент, но я всегда получаю "undefined".

Answer 1

Вам необходимо добавить selectbox с уникальным идентификатором.

, а затем при событии изменения очистить выбранный элемент.

попробовать приведенное ниже решение.

let changeUse = document.getElementById("change");

changeUse.addEventListener("change", hotelchecker);

function hotelchecker() {
 
var element =  document.getElementById('selectbox1');
if (typeof(element) != 'undefined' && element != null)
{
    element.parentNode.removeChild(element);
}
  
  var element2 =  document.getElementById('selectbox2');
if (typeof(element2) != 'undefined' && element2 != null)
{
    element2.parentNode.removeChild(element2);
}
  

    if (changeUse.value == 1) {
        document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox1">
        <select class = "selectstyled"
        id = "changeHotel">
        <option value="0">Option based on previuos choice</option>
        <option value="1">Further choice 1</option>
        <option value="2">Further choice 2</option>
        <option value="3">Further choice 3</option>
        </select>
        </div>
    `)
           }
    if (changeUse.value == 2) {
    document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox2">
        <select class = "selectstyled"
        id = "changeHotel">
        <option value="0">¿En qué Hotel?</option>
        <option value="4">Hotel 1 auf  Granni</option>
        <option value="5">Hotel 2 auf  Granni</option>
        <option value="6">Hotel 3 auf Granni</option>
        </select>
        </div>
       
    `)
    }
};

<div id="selectbox">
        <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
     
              </select>
    </div>

Answer 2

Слишком много жесткого кодирования, я бы посоветовал сделать это красиво, создать элемент для второго варианта

<div id="selectbox">
  <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
  </select>

  <select class="selectstyled" id = "secondSelection"></select>
</div>

и скрипт:

let changeUse = document.getElementById("change");
changeUse.addEventListener("change", hotelchecker);

const optionsSets = {
  0: [],
  1: [
    { value: '0', text: 'Option based on previuos choice'},
    { value: '1', text: 'Further choice 1'},
    { value: '2', text: 'Further choice 2'},
  ],
  2: [
    { value: '0', text: '¿En qué Hotel?'},
    { value: '4', text: 'Hotel 1 auf  Granni'},
    { value: '5', text: 'Hotel 2 auf  Granni'},
  ],
}

function hotelchecker() {
  const secondSelection = document.getElementById("secondSelection")
  secondSelection.innerHTML = 
      optionsSets[changeUse.value].map(({ value, text }) =>  
        `<option value="${value}">${text}</option>`
      ).join('')

  secondSelection.style.display = +changeUse.value ? 'block' : 'none' 
}

hotelchecker()