使用节点和 jQuery 从 Json 中删除表行（无数据库）

Question

我试图弄清楚如何在单击删除按钮时从 Json 数组中删除字段。我对此很陌生，似乎无法弄清楚如何实现这一目标。下面是一个从 JSON 文件中提取数据的简单表格：

代码如下：

$(".task_box").on("click", function(evt){ 
    $("#task_table").show();
    $.getJSON("db.json", function(data) { 
      $.each(data, function(key,value) {
        console.log("Get Json data worked");
        task = data;
        var row = $('<tr><td>'  + task.box1[0].taskName+ '</td><td>'
                                + task.box1[0].time + '</td><td>'
                                + task.box1[0].location + '</td><td>' + '<button type="button" class="btn btn-warning">Delete</button>')
        $('#task_table').append(row);
  });
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
          <div class="col-lg-12 col-md-12">
            <div class="tasks_list">
                  <table id="task_table" class="tableStyle" >
                      <tr>
                        <th>Task Name</th>
                        <th>Time</th>
                        <th>Location</th>  
                        </tr>
                      </table>
                  </div>
               </div>
        </div>

我需要以某种方式使用节点更新和删除表格内容，有人可以帮我实现吗？还有更好的方法来获取我的数组吗？这对我来说不是很好。

我学习 Node 还不到一周，我真的想不通。

Answer 1

您可以只为每个按钮设置一个“删除”类，而不是 onClick，将事件绑定到表并使用 jquery 删除最近的 tr。

第一个变化：

'<button type="button" class="btn btn-warning">Delete</button>'

到

'<button type="button" class="btn btn-warning delete">Delete</button>'

然后绑定到表

$('table').on('click','tr a.delete',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});