如何從按鈕上點擊數組中刪除一個項目

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>

Answer 2

比方說，你發送的單擊事件的人的名字，那麼你可以使用array.splice方法如下所示：

for(var i = arr.length - 1; i >= 0; i--) { 
    if(arr[i] === name) { 
     arr.splice(i, 1); 
    } 
} 

你必須要注意，它會從數組中刪除所有的值該具有相同的名稱。

索引 - 只需發送按鈕的點擊數據-id和拼接對指數

arr.splice(dataid, 1)