Question

我使用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()"/>

Answer 1

您创建元素的方式存在问题。您为新元素提供了一个硬编码id，这意味着当添加多个元素时，您将使用相同id的多个元素结束？（无效且容易出错时访问DOM ）
由于您使用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);
}

Answer 2

你可以使用$ .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);

Answer 3

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

Answer 4

$("#dispTime #timepicker_7").remove()

Answer 5

这是我的想法（未经测试）：

每次添加输入时，只需将其推入数组中，以便在以下情况后将其删除：

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

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

5 个答案: