时间戳

首页 > 解决方案 > 如何删除动态创建的字段

javascript - 如何删除动态创建的字段

问题描述

我有一个功能，可以在单击添加按钮 (+) 时创建最多三个新的下拉字段。

也有删除按钮 (-)。它应该删除最近创建的字段。

但是，当我单击删除按钮时，它不会删除预期的条目，我不确定为什么会这样。

最后，我希望能够删除添加按钮添加的任何新字段。

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>

标签： javascripthtml

解决方案

因为您将remove_item()函数嵌套在add_item()函数中。您在add_item()函数之外使其未定义。我只是把它拉出来，让它在下面成为自己的功能。

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>

推荐阅读