[英]How to dynamically remove input field which is created dynamically using JavaScript
I created an input text dynamically using JS, but what if I want to remove the input field one by one dynamically using a button by calling " removeTextField()
" from the JS? 我使用JS动态创建了输入文本,但是如果我想通过从JS调用“
removeTextField()
”来使用按钮动态地逐个删除输入字段怎么办?
Here is the JS: 这是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()"/>
id
and this means that when adding more than one, you will end with multiple elements with the same id
?( which is invalid and prone to errors when accessing the DOM ) id
,这意味着当添加多个元素时,您将以具有相同id
多个元素结尾?( 这是无效的,并且在访问DOM时容易出错 ) I would use something like this 我会用这样的东西
html HTML
<input type="button" class="button2 addField" value="Add Time" />
<input type="button" class="button2 removeField" value="Remove Time" />
script 脚本
$(function(){
$('.addField').on('click', function(){
$('<input type="text">', {
name: 'i[]',
value: '',
'class': 'daters'
}).appendTo('#dispTime');
});
$('.removeField').on('click', function(){
$('#dispTime .daters').last().remove();
});
});
If you are not using jQuery then the way to remove an element 如果您不使用jQuery,则删除元素的方法
function removeTextField(){
var elements = document.getElementById('dispTime').getElementByClassName('i[]'),
last = elements[elements.length-1];
last.parentNode.removeChild(last);
}
you can use $.remove() for this.. 您可以为此使用$ .remove()。
refer: http://api.jquery.com/remove/ 请参阅: http : //api.jquery.com/remove/
Suggestion: instead of creating elements like the one you did, create like this. 建议:像这样创建元素,而不是像创建元素那样创建。
$('body').append("<input name='i[]' value='' class='daters' id='timepicker_7' />");
$('#timepicker_7').remove();
if you are creating elements on demand and want to use this element multiple times. 如果您是按需创建元素并且想要多次使用此元素。 now you have a function which can be used as many times you want, anywhere on the page
现在您可以在页面上的任意位置使用任意次数的功能
function GetTextField() {
var field = "<input name='i[]' value='' class='daters' id='timepicker_7' />";
return field;
}
var field = GetTextField();
$('body').append(field);
function removeTextField() {
var timepicker = document.getElementByID("timepicker_7");
timepicker.parentElement.removeChild(timepicker);
}
$("#dispTime #timepicker_7").remove()
This is my idea(not tested): 这是我的想法(未经测试):
Every time you add an input, just push it in a array, so you can remove it after: 每次添加输入时,只需将其推入数组即可,因此您可以在执行以下操作后将其删除:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.