As someone who is new to coding web applications, I am currently working on a project that involves adding and deleting dropdowns dynamically.
Unfortunately, I have run into an issue where the delete function does not work when the button is pressed.
Here is the code I am using:
var selectionCounter = 0;
function cloneSelect() {
var select = document.getElementById("List");
var clone = select.cloneNode(true);
var name = select.getAttribute("name") + selectionCounter++;
clone.id = name;
clone.setAttribute("name", name);
document.getElementById("selectContainer").appendChild(clone)
}
function deleteSelect() {
var select = document.getElementById("roomList");
var existingNode = select.cloneNode(true);
var name = select.getAttribute("name") + selectionCounter--;
document.getElementById("selectContainer").parentNode.removeChild(existingNode)
}
<div id="selectContainer">
<select id="List" name="List" required>
<option>Populated by php<option>
</select>
</div>
<button onclick="cloneSelect()" type="submit" class="button">Add Room</button>
<button onclick="deleteSelect()" type="submit" class="button" >Delete Room</button>