如何動態刪除使用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>