无法使用 removeChild 删除动态添加的 <select>

Question

我对编写 Web 应用程序还很陌生，我正在尝试动态添加和删除下拉菜单。

按下按钮时删除功能似乎根本不起作用。

我有以下代码：

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>

Answer 1

您正在 deleteSelect() 方法中克隆节点，而您需要定位要删除的现有节点。

//Create a valid id
var name = select.getAttribute("name") + --selectionCounter;
//Target the element
var clone = document.getElementById(name);
//Remove the element
clone.parentNode.removeChild(clone);

另外，制作你的按钮type="button"

var selectionCounter = 0;

function cloneSelect() {
  var select = document.getElementById("List");
  var clone = select.cloneNode(true);
  var name = select.getAttribute("name") + selectionCounter++;
  clone.id = name;
  console.log(name)
  clone.setAttribute("name", name);
  document.getElementById("selectContainer").appendChild(clone)
}

function deleteSelect() {
  var select = document.getElementById("List");
  //Create a valid id
  var name = select.getAttribute("name") + --selectionCounter;
  //Target the element
  var clone = document.getElementById(name)
  clone.parentNode.removeChild(clone)
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()"  type="button" class="button">Add Room</button>
<button onclick="deleteSelect()"  type="button" class="button" >Delete Room</button>

Answer 2

制作按钮而不是提交按钮
不要删除克隆。

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() {
  selectionCounter--;
  var sel = document.getElementById("List"+(selectionCounter));
  if (sel) document.getElementById("selectContainer").removeChild(sel);
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()"  type="button" class="button">Add Room</button>
<button onclick="deleteSelect()"  type="button" class="button" >Delete Room</button>

Answer 3

您可以使用 container.lastElementChild 获取对最近添加的 <select> 的引用（其中 container 指的是您的 <div id="selectContainer"> 元素）：

var counter = 0
var container = document.getElementById("selectContainer")
var select = document.getElementById("List")

function cloneSelect() {
  var clone = select.cloneNode(true)
  clone.id = clone.name = (select.name + counter++)
  container.appendChild(clone)
}

function deleteSelect() {
  if (counter) {
    counter--
    container.removeChild(container.lastElementChild)
  }
}

<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>

无法使用 removeChild 删除动态添加的 <select>

Can not remove dynamically added <select> using removeChild

javascript

html

css

removechild