CODEWITHSUNDEEP
javascriptdom
S.H
S.H

Reputation: 703

Remove first element, when multiple clicks on selectbox

when user chooses an option in selectbox a new box is triggered.

But supposed user changes his opinion and choose a new option, the former selectbox does not vanish.

How can I make the “wrong” selectbox – first choice – vanish. I have a working example at codepen to illustrate the issue.

When user makes a decision with “Choose Option” he calls the hotelchecker function, so that a second selectbox appears “Option based on previous choice”. When he than reconsider his choice and choose again from “Choose option” - how can I prevent, that I have multiple second selectboxes?

Here is my 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>

Here my 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]

I thought about running a querySelectorAll "changeHotel" and if it is >0 to remove existing element but I always get "undefined".

Upvotes: 0

Views: 59

Answers (2)

Dmitry Reutov
Dmitry Reutov

Reputation: 3032

Too much hardcoding, I would suggest to do it in beautiful way, create element for second option

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

and script is

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

Upvotes: 1

Vishal modi
Vishal modi

Reputation: 1720

You need to add selectbox with unique id.

then on change event clear your selectedbox element.

try below solution.

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>

Upvotes: 2

Related Questions