刪除動態選擇的子節點

我正在創建一個動態選擇表單。基本上，用戶從select中選擇一個選項，然後根據他們選擇的選項將它放入數據對象，然後根據他們以前的答案生成新的選擇。在他們回答3個關於他們車輛選擇的問題後，它打印出他們的車輛選擇。刪除動態選擇的子節點

我遇到的問題是有能力在飛行中更改以前的選項。我想讓他們能夠改變以前的選擇，它會刪除以後的選擇

例如。用戶首先選擇Car，Ford並顯示模型選擇。如果用戶返回並將汽車更換爲卡車。我想刪除福特和車型選擇。這裏是代碼的一部分，我有保存數據並創建新的選擇動態

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>

我在想什麼是檢查，看看是否選擇是父節點（頂層容器）的lastChild。如果不是，那麼刪除那個孩子，直到它只是選擇被改變，並且選擇落在它之前。

有什麼建議嗎？謝謝！

來源

2012-04-10 Lance Laughlin

在你createSelect功能，分配一個ID來使用類似selEle.id = 'newID';新元素。

之前調用createSelect功能，檢查，看看是否新的元素存在，如果有，將其刪除：

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

來源

2012-04-10 13:43:13 Travesty3

如果我分配到「createSelect」功能的ID那不是給每個新選擇一個Id？這不會刪除所有具有該ID的選擇嗎？ – 2012-04-10 13:48:32

也許爲'createSelect'函數創建另一個參數來傳入要使用的ID，例如'selModel'，'selMake'，'selYear'等... – Travesty3 2012-04-10 13:52:22

刪除動態選擇的子節點

回答

相關問題