如何删除动态创建的字段

Question

I have a function which creates up to three new dropdown fields upon clicking the add button (+).

There is remove button (-) too. It is supposed to delete the most recently created field.

However, when I click on the remove button it does not remove the expected entry and I'm not sure why this is the case.

Finally, I want to be able to delete any new field that has been added by the add button.

 var clicks = 0 var update = 1 function add_item() { if (clicks < 2) { clicks += 1 update += 1 var x = document.createElement('div') var innerStuff = document.getElementById('hour_on_' + clicks).innerHTML var choiceLocation = document.getElementById("hour_on_" + clicks) x.innerHTML = innerStuff x.setAttribute("id", "hour_on_" + update) choiceLocation.appendChild(x) } function remove_item() { clicks -= 1 update -= 1 var elem = document.getElementById("hour_on_" + (update + 1)) elem.remove() } }

 <div> <label for="hour_on_1">Floor Warm From:</label> </div> <div id="hour_on_1"> <select class="hour_on" style="width:75px"> <option value="0"></option> <option value="1">1:00</option> <option value="1.25">1:15</option> <option value="1.5">1:30</option> <option value="1.75">1:45</option> <option value="2">2:00</option> <option value="2.25">2:15</option> <option value="2.5">2:30</option> <option value="2.75">2:45</option> <option value="3">3:00</option> </select> </div> <div> <button type="button" onclick="add_item()" style=clear:both>+</button> <button type="button" onclick="remove_item()" style=clear:both>-</button> </div>

Answer 1

Because you nested your remove_item() function inside your add_item() function. You made it undefined outside of your add_item() function. I just pulled it out and made it its own function below.

 var clicks = 0; var update = 1; function add_item() { if (clicks < 2) { clicks += 1 update += 1 var x = document.createElement('div') var innerStuff = document.getElementById('hour_on_' + clicks).innerHTML var choiceLocation = document.getElementById("hour_on_" + clicks) x.innerHTML = innerStuff x.setAttribute("id", "hour_on_" + update) choiceLocation.appendChild(x) } } // I only pulled the below function outside of the above one ;) function remove_item() { if (clicks > 0) { clicks -= 1 update -= 1 var elem = document.getElementById("hour_on_" + (update + 1)) elem.remove() } console.log('clicked') }

 <div> <label for="hour_on_1">Floor Warm From:</label> </div> <div id="hour_on_1"> <select class="hour_on" style="width:75px"> <option value="0"></option> <option value="1">1:00</option> <option value="1.25">1:15</option> <option value="1.5">1:30</option> <option value="1.75">1:45</option> <option value="2">2:00</option> <option value="2.25">2:15</option> <option value="2.5">2:30</option> <option value="2.75">2:45</option> <option value="3">3:00</option> </select> </div> <div> <button type="button" onclick="add_item()" style=clear:both>+</button> <button type="button" onclick="remove_item()" style=clear:both>-</button> </div>