删除第一个元素，当多次单击选择框时

Question

当用户在选择框中选择一个选项时，将触发一个新框。

但是假定用户改变了看法并选择了一个新选项，以前的选择框不会消失。

我如何使“错误的”选择框-首选-消失。我有一个working example at codepen来说明问题。

[当用户使用“选择选项”做出决定时，他调用了酒店检查器功能，因此第二个选择框出现“基于先前选择的选项”。 [而不是重新考虑自己的选择，然后从“选择选项”中再次选择-我如何防止我有多个第二选择框？

这是我的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，但我总是得到“未定义”。

Answer 1

您需要添加具有唯一ID的选择框。

然后在发生更改事件时清除您的selectedbox元素。

尝试以下解决方案。

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()