javascript - 如何动态删除使用 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);
}