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

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

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

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>