JavaScript-Code wird zweimal ausgeführt, nachdem es dreimal verwendet wurde

Question

Ich versuche, einen Javascript-Befehl zu erstellen, der Dropdown-Felder nacheinander erstellt. Wenn ich jedoch ein Dropdown-Menü ändere, sollte das Dropdown-Menü für Kinder nicht mehr angezeigt werden. Dies ist das javascript:

var categorycount = 0; 

function categorygenerate() { 

    //for testing purposes 
     var categoryarray = new Array(), i; 
     for (i = 0; i < 2; i++) { 
      categoryarray[i] = Math.random(); 
     } 
     return categoryarray; 
    } 
    function delete_category(selectedcategory){ 
     restar = categorycount - selectedcategory; 
     categoria = "category" + restar; 
     var element = document.getElementById(categoria); 
     element.parentNode.removeChild(element); 
     categorycount = restar; 
    } 

function dropdowngenerate(divname) { 
    comparelevel = divname.slice(-1); 
    if (comparelevel != categorycount){ 
     delete_category(comparelevel) 
    } 
    else{ 
    ++categorycount; 
    var categoria = "category" + categorycount; 
    var newDiv=document.createElement('div'); 
    var html = '<select>', categories = categorygenerate(), i; 
    for(i = 0; i < categories.length; i++) { 
     html += "<option value='"+categories[i]+"'>"+categories[i]+"</option>"; 
    } 
    html += '</select>'; 
    newDiv.innerHTML= html; 
    document.getElementById(divname).appendChild(newDiv); 
    newDiv.setAttribute("id",categoria); 
    newDiv.setAttribute('onchange', "dropdowngenerate('"+categoria+"');"); 
    } 
} 

Und das ist die HTML:

<div id="category0"> 
<select onchange="dropdowngenerate('category0');"> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
</select> 
<br> 
</div> 

Das Skript funktioniert gut, die ersten 3-mal, aber im vierten Dropdown, wird das Skript zweimal aufgerufen. Das erste Mal, es heißt, es funktioniert einwandfrei. Beim zweiten Mal wird es so ausgeführt, als wäre das zweite Dropdown (Kategorie1) geändert worden und löscht den Rest der Dropdown-Liste.

Irgendwelche Hinweise?

Answer 1

EDITED:

Dieser Code wird für eine bestehende Geschwister suchen, die ein Container für verschachtelte Kinder. Wenn es eins findet, entfernt es es. Dann wird ein neuer solcher Container mit dem angehängten Event-Handler erstellt.

document.getElementById("selectCategory_0").addEventListener("change", handle_onChange); 
 

 
function handle_onChange(event){ 
 
    var parentContainer = this.parentNode; 
 

 
    // --------------------------- 
 
    // if a child dropdown exist, remove it 
 
    // --------------------------- 
 
    var childContainer = parentContainer.querySelector(".selectContainer"); 
 
    if (childContainer) { parentContainer.removeChild(childContainer); } 
 
    // --------------------------- 
 

 
    // --------------------------- 
 
    // create a new child dropdown 
 
    // --------------------------- 
 
    var categories = categorygenerate(); 
 
    childContainer = generateChild(document, categories); 
 
    // --------------------------- 
 

 
    // --------------------------- 
 
    // add the new childContainer to the DOM "after" the current dropdown 
 
    // --------------------------- 
 
    parentContainer.insertBefore(childContainer, this.nextSibling); 
 
    // --------------------------- 
 
} 
 

 
function generateChild(root, categories){ 
 
    // --------------------------- 
 
    // build an html string 
 
    // --------------------------- 
 
    var html = "<div class='selectContainer'><select>"; 
 
    for (var i = 0; i < categories.length; i++) { 
 
    html += "<option value='" + categories[i] + "'>" + categories[i] + "</option>"; 
 
    } 
 
    html += '</select></div>'; 
 
    // --------------------------- 
 

 
    // --------------------------- 
 
    // create an element from the html string 
 
    // --------------------------- 
 
    var tplt = root.createElement('template'); 
 
    tplt.innerHTML = html; 
 
    var el = tplt.content.firstChild; 
 
    // --------------------------- 
 

 
    // --------------------------- 
 
    // attach the change handler 
 
    // --------------------------- 
 
    el.firstChild.addEventListener("change", handle_onChange); 
 
    // --------------------------- 
 
    
 
    return el; 
 
} 
 

 
function categorygenerate() { 
 
    var categoryarray = new Array() 
 

 
    // --------------------------- 
 
    // for testing purposes 
 
    // --------------------------- 
 
    for (var i = 0; i < 2; i++) { 
 
    categoryarray[i] = Math.random(); 
 
    } 
 
    // --------------------------- 
 

 
    return categoryarray; 
 
}

.selectContainer { padding: 1em;}

<div id="category0" class="selectContainer"> 
 
    <select id="selectCategory_0"> 
 
    <option>test1</option> 
 
    <option>test2</option> 
 
    <option>test3</option> 
 
    </select> 
 
</div>

Answer 2

, wenn Sie Ihren Code zu halten, eine einfache Möglichkeit, dies zu tun, ist eine Funktion wie

("#category0").lastChild.remove() 

mit

Das wird das letzte Kind löschen (die Kategorie1) und auch das Kind von diesem. Ich verstehe dein Denken nicht wirklich, aber ich hoffe, es wird dir helfen. : P