javascript - 如何在单击按钮时从数组中删除项目

Question

我有一个只有几行和删除按钮的表格。我已将所有表列表存储在数组“arr”中。如何在单击按钮时从该数组中删除所选项目。

<table id="sum_table">
  <tr class="titlerow">   
    <th>S.N.</th>
    <th>Name</th>
    <th>Action</th>
</tr>
<tr>
    <td>1</td>
    <td>John</td>
    <td><button class="dm" data-id="0">Remove</button></td>
</tr>
<tr>
    <td>2</td>
    <td>Henry</td>
    <td><button class="dm" data-id="1">Remove</button></td>
</tr>
</table>

 var arr= [
  ["name", John],
  ["name", Henry]
  ];

  function clickHandler(clickEvent) {

}

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandler);
});

Answer 1

您的数组需要是对象数组而不是数组的数组。您也可以给表的名称列一个类来访问它的值，然后使用 findIndex 找到名称属性在数组中的索引，然后 splice 删除

  $(function(){
        var arr= [
          {"name": "John"},
          {"name": "Henry"}
       ];
       $('.dm').click(function(){
            var val = $(this).closest('tr').find(".name").text();
            console.log(val);
            var index = arr.findIndex(function(item) {return item.name == val})
            console.log(index)
            arr.splice(index, 1)
            console.log(arr);
        })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sum_table">
  <tr class="titlerow">   
    <th>S.N.</th>
    <th>Name</th>
    <th>Action</th>
</tr>
<tr>
    <td>1</td>
    <td class="name">John</td>
    <td><button class="dm" data-id="0">Remove</button></td>
</tr>
<tr>
    <td>2</td>
    <td class="name">Henry</td>
    <td><button class="dm" data-id="1">Remove</button></td>
</tr>

</table>