Entfernen von untergeordneten Knoten bei dynamischer Auswahl

Question

Ich erstelle ein dynamisches Auswahlformular. Grundsätzlich wählt der Benutzer eine Option aus der Auswahl aus, und je nachdem, welche Option er ausgewählt hat, geht er in ein Datenobjekt und generiert dann basierend auf seiner vorherigen Antwort eine neue Auswahl. Nachdem sie 3 Fragen zu ihrer Fahrzeugauswahl beantwortet haben, druckt sie ihre Fahrzeugauswahl aus.

Das Problem, auf das ich gestoßen bin, ist die Fähigkeit, eine vorherige Option im laufenden Betrieb zu ändern. Ich möchte sie in der Lage sein, eine vorherige Auswahl zu ändern, und es würde die spätere Auswahl entfernen

Ex. Der Benutzer wählt zuerst Auto, Ford und eine Auswahl für das Modell wird angezeigt. Wenn der Benutzer zurück ging und Auto zu LKW wechselte. Ich möchte Ford und die Modellauswahl entfernen. Hier ist der Teil des Codes Ich habe, dass die Daten enthält und erstellt die neue Auswahl dynamisch

var data=new Object();// create a new data object to hold info 


data['init']=['Car','Truck','SUV']; 

data['Car']=['Audi','Dodge','Ford','Volkswagon']; 
data['Audi']=['A4','TT','R8']; 
data['Dodge']=['Charger','Challenger','Stealth']; 
data['Ford']=['Focus','Fusion','Mustang']; 
data['Volkswagon']=['Jetta','GTI','Beetle']; 

data['Truck']=['Dodge Truck','Ford Truck','Toyota Truck']; 
data['Dodge Truck'] = ['Ram-1500','Ram-2500','Ram-3500']; 
data['Ford Truck'] = ['F-150','F-250','Ranger']; 
data['Toyota Truck'] = ['Tundra','Tacoma']; 

data['SUV']=['Dodge SUV','Ford SUV','Toyota SUV']; 
data['Dodge SUV'] = ['Durango','Journey','Caliber']; 
data['Ford SUV'] = ['Escape','Edge','Explorer']; 
data['Toyota SUV'] = ['Rav4','Highlander','4runner']; 

var hold = data['init'];//Sets data to 'init' by default 

    var selectedArray = [];//This array holds the selected options (to be used to display the vehicle name) 

    function init(){//call first to create the first select box and populate with 'init'   

    firstSelect = document.createElement('select'); 
    firstSelect.setAttribute("onChange","createSelect(this.value)"); 
    createSelect('init');  
} 




//Main create function for select boxes 
function createSelect(value){ 

    selectHold = value;//sets selectHold to the value of the selected item (this will be used for displaying the name in disName) 

    //This just prevents it from adding "Car, Truck or SUV to the selectedArray 
    if(value != 'init' && value != 'Truck' && value != 'Car' && value != 'SUV' && value != 'Select your vehicle options'){ 
     selectedArray.push(selectHold); 
    } 

    hold=data[value];// sets this holder to the value of the selected item for the if statement 


    if(hold){ //just checks to see if hold exists 

     var selEle = document.createElement('select');//creates new select element 

     //gives selEle onchange function 
     selEle.setAttribute("onChange","createSelect(this.value)"); 

     //Creates the "default" option. Forcing them to pick something. 
     var defaultOpt = document.createElement('option'); 
     var vehInfo = document.createTextNode("Select your vehicle options"); 
     defaultOpt.appendChild(vehInfo); 
     selEle.appendChild(defaultOpt); 

     //Populates the options and adds it to the document 
     for(var i = 0, l = hold.length; i < l; i++){ 
      var newOpt = document.createElement('option'); 
      newOpt.appendChild(document.createTextNode(hold[i])); 
      newOpt.setAttribute('value',hold[i]); 
      selEle.appendChild(newOpt); 
     } 


     //put select on the page 
     document.getElementById('top-container').appendChild(selEle); 
     } 

    else{  //if not, then put out final form 
     disName(selectHold,selectedArray);//call disName function an dpass it the value of selectHold 

     } 

} 

HTML:

<div id="top-container"> 
    <h1>Awesome<br/> 
    Car<br/> 
    Picker</h1> 


    </div> 
    <div id="middle-container"> 
<h2>Your vechle choice:</h2> 
    </div> 

    <div id="bottom-container"> 
    <div id="mail-form"> 
    <form name='mail-form'> 

    <label>Name</label> 
    <input name="name" autofocus> 

    <label>Email</label> 
    <input name="email"> 

    <label>Credit Card number</label> 
    <input name="cc"> 

    <input id="submit" name="submit" value="Submit" onClick="validate()"> 

    </form> 
    </div> 

    </div> 

    <body> 

Was ich denke, ist das zu überprüfen, um zu sehen, ob die Auswahl ist das lastChild des übergeordneten Knotens (oberster Container). Wenn dies nicht der Fall ist, löschen Sie das untergeordnete Element, bis es an dem Punkt ist, an dem nur die Auswahl geändert wurde und die Auswahl davor fiel.

Irgendwelche Vorschläge? Danke!

Answer 1

In Ihrer createSelect Funktion, eine ID zu dem neuen Element mit etwas wie selEle.id = 'newID'; zuweisen.

Bevor die createSelect Funktion aufrufen, überprüfen, um zu sehen, ob das neue Element vorhanden ist, und wenn ja, entfernen Sie sie:

if (document.getElementById('newID')) 
    document.getElementById('top-container').removeChild(document.getElementById('newID'));