单击按钮时接头未移除答案

【问题标题】：Splice not removing when button is clicked单击按钮时接头未移除
【发布时间】：2017-01-12 23:49:15
【问题描述】：

当您单击删除按钮时，我试图从数组中删除一个人的全部数据，但它不起作用。请帮忙。

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

&lt;div id='name'&gt;&lt;/div&gt;

【问题讨论】：

为什么需要jquery标签？
Adding/removing items from JSON data with JQuery的可能重复
对我来说很好用...您是否在每次调用 fun 时都在更新 name div？
使用 forEach 代替 map
您的数据正在从阵列中删除。但是，您的 HTML 没有“自动”绑定，因此您仍然会在 HTML 中看到该条目...

标签： javascript jquery

【解决方案1】：

您可以在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，然后使用remove() 方法将其从DOM 中删除。

注意：最好使用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();
}

&lt;div id='name'&gt;&lt;/div&gt;

【讨论】：

var names = data.map，函数中没有返回任何内容。它应该像上面的 cmets 所说的那样更改为 forEach。
forEach 返回undefined，因此您也可以删除var names = 。

【解决方案2】：

问题：您只是从数组中而不是从 DOM 中删除对象。

建议的解决方案：您应该更新 DOM，所以我建议将 innerHTML 部分包装在另一个函数中，然后在每次更新 data 时调用它，这样您就可以看到删除反射在页面上：

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

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

希望这会有所帮助。

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

&lt;div id='name'&gt;&lt;/div&gt;

【讨论】：