Question

当我点击删除按钮但是它无法正常工作时，我试图从数组中删除一个人的整个数据。请帮忙。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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，然后将其从DOM usind remove()方法中删除。

注意：最好使用forEach代替map。

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

单击按钮时拼接不会移除

2 个答案: