I have a table with few rows and delete button. I have stored all the list of table in an array 'arr'. How can I remove the selected item from that array on button click.

<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);
});

I have a table with few rows and delete button. I have stored all the list of table in an array 'arr'. How can I remove the selected item from that array on button click.

<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);
});

• javascript
• jquery
• arrays

Share Improve this question Follow asked Mar 10, 2017 at 4:50 saninsanin 27422 gold badges55 silver badges1919 bronze badges 2

• Take a look at array.splice method – JohanP Commented Mar 10, 2017 at 4:51
• find the index of the item and as @JohanP told use arr.splice(index,1) – Jijo Cleetus Commented Mar 10, 2017 at 4:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Your array need to be an array of object and not an array of array. Also you can give a class to the name column of a table to access its value and then use findIndex to find the index of the name attribute in array and then splice to remove it.

  $(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./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>

Lets say you send the name of the person on click event then you can use array.splice method as shown below :

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

You have to note that it will delete all the values from array which has the same name.

With Index - Just send the data-id on click of button and splice the array on that index

arr.splice(dataid, 1)