我有一个 HTML-JavaScript 脚本,用户可以在其中将数据插入新数组 []
通过使用表单的文本字段和插入按钮。
通过按插入按钮,用户将输入的数据插入到数组中。
我有一个函数将数组的所有值打印到 <p id="demo"></p>
中并每 100 毫秒运行一次,以便使用数组值进行更新。
我还有一个重置按钮,单击时可以删除每个数组的值。
我想要做的是在每个数组的值旁边添加一个删除按钮,以便用户更容易删除插入的错误值。
我正在使用此代码插入值并打印它们:
HTML:
<div align="center">
<form id="form1">
<input type="text" name="fname" id="fname" placeholder="Type here!">
</form>
<br>
<input type="button" id="Button Insert" onclick="myFunction()" value="Insert">
<input type="button" onclick="myFunction3()" value="Reset">
</div>
<p id="demo" align="center"></p>
JavaScript/JQuery:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
all_values.push(temp_val);
document.getElementById("form1").reset();
}
setInterval(function () {
$("#demo").html(all_values.join("<br>"));
}, 100);
function myFunction3() {
all_values.length = 0;
}
更具体地说,我想要这样的东西:iOS example JSFiddle Example 1 JSFiddle Example 2 。
你能帮我一下吗?提前致谢。
最佳答案
我会反过来做。
删除 setInterval
因为这样做确实很糟糕。
从 id
属性中删除空格(id="Button-Insert"
,而不是 id="Button Insert"
)
Don't use onclick
attributes 。相反,使用 jQuery 注册点击事件处理程序
// caching is a good practice when you reffer to the same elements multiple times:
var all_values =[], demo = $("#demo"), form = $("#form1")[0], fname = $("#fname");
$('#Button-insert').click(function(){
var temp_val = fname.val();
all_values.push(temp_val);
// create delete button along with the value
demo.append('<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>');
form.reset();
});
$('#Button-reset').click(function(){
all_values = [];
demo.html('');
});
// event delegation for dynamic elements:
demo.on('click', '.del-btn', function(){
all_values.splice(all_values.indexOf($(this).val()), 1);
$(this).parent().remove();
});
关于javascript - 每个数组值旁边的删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30694792/