Splice not removing when button is clicked

Question

I am trying to delete whole data of one person from the array when you click on the delete button but it is not working. please help.

var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'},
            {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'},
            {name: 'John', lastName: 'Milton', dob: '01/06/2000'},
            {name: 'James', lastName: 'White', dob: '30/11/1970'},
            {name: 'Luke', lastName: 'Brown', dob: '15/08/1999'}
           ];


var names = data.map(function(x,i){

  var myNames = document.getElementById('name');
  myNames.innerHTML += (i +". "+ x.name + ' '+x.lastName +"  "+ "<button onclick = fun("+i+")>DEL</button>"+'<br>');;

}); 

function fun(num){
  data.splice(num,1); 
}

<div id='name'></div>

Possible duplicate of [Adding/removing items from JSON data with JQuery](http://stackoverflow.com/questions/4538269/adding-removing-items-from-json-data-with-jquery) — Daniel Corzo, Jan 12 '17 at 15:25
Works fine for me... Are you are updating the `name` div each time `fun` is called? — , Jan 12 '17 at 15:27
Your data is being removed from the array. There's no 'automatic' binding with your HTML however, so you'll still see the entry in your HTML... — Nathan, Jan 12 '17 at 15:29

Zakaria Acharki · Answer 1 · 2017-01-12T15:49:15.420

You could wrap you entry on span like :

myNames.innerHTML += "<span>"+(i +". "+ x.name + ' '+x.lastName +" <button onclick=fun(this,"+i+")>DEL</button><br></span>");

Then pass also the current clicked button this on click as parameter :

<button onclick=fun(this,"+i+")>DEL</button>

And use the closest() method to get the parent span then remove it from the DOM usind remove() method.

NOTE : Better to use forEach instead of map.

var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'},
            {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'},
            {name: 'John', lastName: 'Milton', dob: '01/06/2000'},
            {name: 'James', lastName: 'White', dob: '30/11/1970'},
            {name: 'Luke', lastName: 'Brown', dob: '15/08/1999'}
           ];


var myNames = document.getElementById('name');

data.forEach(function(x,i){
  myNames.innerHTML += "<span>"+(i +". "+ x.name + ' '+x.lastName +" <button onclick=fun(this,"+i+")>DEL</button><br></span>");
}); 


function fun(_current_button,num){
  data.splice(num,1); 
  _current_button.closest('span').remove();
}

<div id='name'></div>

`var names = data.map`, nothing is being returned in the function. It should be changed to a `forEach` like the comments say above. — BenG, Jan 12 '17 at 15:44
`forEach` returns `undefined` so you can remove `var names = ` too. — BenG, Jan 12 '17 at 15:48

Zakaria Acharki · Answer 2 · 2017-01-12T15:45:22.267

Problem : You're removing the object just from the array not from the DOM.

Suggested solution : You should update the DOM so I suggest to wrap the innerHTML part in another function then call it everytime you're updating the data so you could see the remove reflection on the page :

function showData(){
  myNames.innerHTML ='';

  data.map(function(x,i){
    myNames.innerHTML += (i +". "+ x.name + ' '+x.lastName +"  "+ "<button onclick = fun("+i+")>DEL</button>"+'<br>');
  }); 
}

Hope this helps.

var myNames = document.getElementById('name');
var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'},
            {name: 'Anna', lastName: 'Jones', dob: '06/02/1968'},
            {name: 'John', lastName: 'Milton', dob: '01/06/2000'},
            {name: 'James', lastName: 'White', dob: '30/11/1970'},
            {name: 'Luke', lastName: 'Brown', dob: '15/08/1999'}
           ];

showData();

function showData(){
  myNames.innerHTML ='';
  
  data.map(function(x,i){
    myNames.innerHTML += (i +". "+ x.name + ' '+x.lastName +"  "+ "<button onclick = fun("+i+")>DEL</button>"+'<br>');
  }); 
}

function fun(num){
  data.splice(num,1); 
  showData();
}

<div id='name'></div>

Splice not removing when button is clicked

2 Answers2