ボタンをクリックしたときにスプライスが削除されない

Question

削除ボタンをクリックしたときに1人のデータ全体をアレイから削除しようとしていますが、動作していません。助けてください。

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

 
}); \t 
 

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

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

Answer 1

問題：あなただけの配列からではないDOMからオブジェクトを削除しています。

対処法：

​​：私は別の関数で innerHTML部分をラップすることをお勧めので、あなたはDOMを更新する必要がありますそのようにあなたがページ上の削除反射を見ることができるあなたは dataを更新している毎回それを呼び出します

これが役に立ちます。

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

そして：そして、パラメータとしてクリックにも、現在のクリックされたボタンthisを渡す

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

：

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>

Answer 2

あなたのようなspanであなたのエントリを包むことができ0123を使用する親を取得するメソッドspan DOM usind remove()メソッドからそれを削除します。

注：mapの代わりにforEachを使用したほうがよい。

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>