How to remove an item from the array on button click

Question

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

find the index of the item and as @JohanP told use arr.splice(index,1) — Jijo Cleetus
– Jijo Cleetus, Commented Mar 10, 2017 at 4:57

Shubham Khatri · Accepted Answer · 2017-03-10 05:00:59Z

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.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>

Gopesh Sharma · Accepted Answer · 2017-03-10 05:06:58Z

0

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)

edited Mar 10, 2017 at 5:06

answered Mar 10, 2017 at 4:58

Gopesh Sharma

7,0604 gold badges27 silver badges35 bronze badges

2 Comments

brk Over a year ago

Why will you like to change the content of original array

Gopesh Sharma Over a year ago

@brk Its not about changing the contents of original array, just letting him know that using this method will delete all the contents of an array having the same name

Collectives™ on Stack Overflow

How to remove an item from the array on button click

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related