如何动态删除使用 JavaScript 动态创建的输入字段

How to dynamically remove input field which is created dynamically using JavaScript

本文关键字：动态 创建 JavaScript 字段 输入 删除 何动态      更新时间：2023-09-26

>我使用 JS 动态创建了一个输入文本，但是如果我想通过从 JS 调用"removeTextField()"来使用按钮动态地逐个删除输入字段怎么办？

这是JS：

<script type="text/javascript">
function addTextField(){
    var element = document.createElement("input");
    element.setAttribute("name", "i[]");
    element.setAttribute("value", "");
    element.setAttribute("class", "daters");
    element.setAttribute("id", "timepicker_7");
    var myvalue = document.getElementById("dispTime");
    myvalue.appendChild(element);
}
</script>

。

<input type = "button" class="button2" value = "Add Time" onclick = "addTextField()"/>
  1. 创建元素的方式有问题。您正在为新元素提供硬编码id这意味着当添加多个元素时，您将以具有相同id的多个元素结束？（这是无效的，在访问 DOM 时容易出错）
  2. 既然你使用jQuery，为什么不利用它来简化添加/删除元素时的代码呢？

我会使用这样的东西

.html 

<input type="button" class="button2 addField" value="Add Time" />
<input type="button" class="button2 removeField" value="Remove Time" />

脚本

$(function(){
    $('.addField').on('click', function(){
        $('<input type="text">', {
              name: 'i[]',
              value: '',
              'class': 'daters'
        }).appendTo('#dispTime');
    });
    $('.removeField').on('click', function(){
         $('#dispTime .daters').last().remove();
    }); 
});

如果你不使用jQuery，那么删除元素的方法

function removeTextField(){
   var elements = document.getElementById('dispTime').getElementByClassName('i[]'),
       last = elements[elements.length-1];
   last.parentNode.removeChild(last);
}

function removeTextField() {
    var timepicker = document.getElementByID("timepicker_7");
    timepicker.parentElement.removeChild(timepicker);
}
你可以

使用 $.remove（） 来解决这个问题。

参考： http://api.jquery.com/remove/

建议：与其像你那样创建元素，不如像这样创建。

  $('body').append("<input name='i[]' value='' class='daters' id='timepicker_7' />");
  $('#timepicker_7').remove();

如果您按需创建元素并希望多次使用此元素。现在，您有一个可以在页面上的任何位置多次使用的功能

function GetTextField() {
    var field = "<input name='i[]' value='' class='daters' id='timepicker_7' />";
    return field;
}
var field = GetTextField();
$('body').append(field);

$("#dispTime #timepicker_7").remove()
这是我

的想法（未经测试）：

每次添加输入时，只需将其推送到数组中，以便您可以在以下之后将其删除：

<script type="text/javascript">
var inputStack = new Array();
function addTextField(){
    var element = document.createElement("input");
    element.setAttribute("name", "i[]");
    element.setAttribute("value", "");
    element.setAttribute("class", "daters");
    element.setAttribute("id", "timepicker_7");
    var myvalue = document.getElementById("dispTime");
    myvalue.appendChild(element);
    inputStack.push(element);
}
// Now if you want to remove, just do this
inputStack[0].remove(); // I think it'll work for example
</script>
相关文章：