Question

我有一个简单的表，要删除在该表上单击的对象。

当我使用下面的代码时，遇到一些问题。当我删除第一个对象“ Nikola”时，一切正常。但是，在删除第一个对象后，当我按下以删除第二个对象“ Petar”时，它将删除第三个对象“ Jovan”。

我希望这是有道理的。

let table = document.getElementById('tableBody');

let persons = [
  { id: 1, name: 'Nikola' },
  { id: 2, name: 'Petar' },
  { id: 3, name: 'Jovan' },
  { id: 4, name: 'John' },
  { id: 5, name: 'Dare' }
]

makeTable(persons);

function makeTable(list) {
  for (let i = 0; i < persons.length; i++) {
    let row = table.insertRow(-1);
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let cell3 = row.insertCell(2);

    let btn = document.createElement("button");
    btn.innerHTML = "Delete";

    btn.addEventListener('click', (e) => {
      persons.splice(persons.findIndex(n => n.id == list[i].id), 1);
      e.currentTarget.parentElement.parentElement.remove();  
    });

    cell1.innerHTML = list[i].id;
    cell2.innerHTML = list[i].name;
    cell3.appendChild(btn);
  }
}

但是使用此代码作为删除按钮，效果很好。

btn.addEventListener('click', (e) => {
  let tempPersons = persons.slice(0);
  tempPersons.splice(tempPersons.findIndex(n => n.id == list[i].id), 1);
  persons = tempPersons;
  e.currentTarget.parentElement.parentElement.remove();  
});

问题是我不知道为什么这段代码能很好地工作。

有人可以解释一下这是怎么回事。或告诉我在哪里寻找答案。

编辑：对不起，如果我不够清楚。我不需要工作的桌子。使用第二个EventListener时，我的表工作正常。我只想知道为什么它可以与第二个而不是第一个EventListener一起使用。我不明白发生了什么事。这些事情如何运作。

Answer 1

我不确定自己需要什么或出错了，但是我试图弄清楚你的目标是什么所以我做这个

html

<table>
    <tbody id="tableBody">
    </tbody>
</table>

脚本

    let table = document.getElementById('tableBody');

    let persons = [
        { id: 1, name: 'Nikola' },
        { id: 2, name: 'Petar' },
        { id: 3, name: 'Jovan' },
        { id: 4, name: 'John' },
        { id: 5, name: 'Dare' }
    ];


    const printTable = () => {
        table.innerHTML = '';
        persons.map( (p, pI) => {
            table.insertAdjacentHTML('beforeend', `
                <tr>
                    <td>${pI+1}</td>
                    <td>${p.name}</td>
                    <td><button onclick="del(this, ${p.id})">Delete</button></td>
                </tr>
            `);
        })
    }

    const del = (e, id) => {
        persons = persons.filter( p => p.id !== id);
        printTable();
    }

    printTable();

所以我创建了一个构建表的功能，然后当单击删除按钮时，id人员将其从arrObj中删除，然后重建了表

Answer 2

我做了一个类似的例子。这取决于您是否只想从阵列或dom中删除项目？还是两者都有？

ld.lld

这与以前的答案具有相同的作用。首先，我创建表，然后从列表中删除项目时，它会清理表并再次根据值创建。请注意，如果表中有很多数据，这将是非常繁重的操作。

这是一支笔https://codepen.io/shnigi/pen/GRogxoY

删除单击对象的事件侦听器

2 个答案: