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（克隆） } function deleteSelect（）{ var select = document.getElementById（“roomList”）; var existingNode = select.cloneNode（true）; var name = select.getAttribute（“name”）+ selectionCounter--; 的document.getElementById（ “selectContainer”）。parentNode.removeChild（existingNode） } ＆lt; div id =“selectContainer”＆gt; ＆lt; select id =“List”name =“List”required＆gt; ＆lt; option＆gt;填充php＆lt; option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆lt; button onclick =“cloneSelect（）”type =“submit”class =“button”＆gt; Add Room＆lt; / button＆gt; ＆lt; button onclick =“deleteSelect（）”type =“submit”class =“button”＆gt;删除房间＆lt; / button＆gt;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: