單擊按鈕時不會刪除的拼接

Question

我試圖在單擊刪除按鈕時刪除一個人的整個數據，但它不起作用。請幫忙。

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部分然後調用它每次你更新 data所以你可以看到頁面上的刪除反映您應該更新DOM

希望這會有所幫助。

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像你這樣的條目：

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

然後還通過對點擊當前點擊的按鈕this作爲參數：

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

而且使用closest()方法獲取父母span然後將其從DOM中移除，方法爲remove()。

注意：更好使用forEach而不是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>