每个数组值旁边的删除按钮答案

【问题标题】：Delete button next to each array's value每个数组值旁边的删除按钮
【发布时间】：2015-08-22 01:44:07
【问题描述】：

我有一个 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。

你能帮帮我吗？提前致谢。

【问题讨论】：

您是否有一个工作示例使用您的代码，其中插入了值等
这里是完整代码：pastebin.com/jBSscbch。你可以在任何你想要的地方运行它。谢谢。
你还需要那个数组吗？或者您只是使用它来将值显示为 HTML？
我也需要它来做其他事情。

标签： javascript jquery html arrays

【解决方案1】：

在创建表格的同时创建删除按钮。

 function loadvalues(){
  var i, button; 
  $('#demo').empty();
  for(i in all_values){
      $('#demo').append(all_values[i]);
      button = $('<button>',{'text':'Delete'}).click(function(){
           all_values.splice(this,1);
           loadvalues();
      }.bind(i)).appendTo('#demo');
      $('#demo').append('<br>');
   }
 }

你也不需要轮询，你可以简单地使用这样的函数按需添加每个：

 function addVal(){
     var val = $("#fname").val(), i = all_values.length;
     all_values.push(val);

     $('#demo').append(val);
     button = $('<button>',{'text':'Delete'}).click(function(){
            all_values.splice(this,1);
            loadvalues();
    }.bind(i)).appendTo('#demo');
    $('#demo').append('<br>');
 }

我有一些错别字，代码有效，在这里检查： http://codepen.io/anon/pen/QbvgpW

【讨论】：

不幸的是，我尝试了您的解决方案，但没有成功（如果您想尝试，这里是完整的代码，因为我可能做错了：pastebin.com/jBSscbch）。此外， all_values.length = 0;指的是从数组中删除所有值的重置按钮。请注意，我必须使用数组 [] 因为我也需要它来做其他事情。感谢您的帮助。

【解决方案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();
});

JSFiddle

【讨论】：