如何用DOM的onClick函数删除表格指定行？点击X按钮误删首行问题

我明白你遇到的问题了——每次点击X按钮都只删掉第一行，这确实挺闹心的。你自己也精准找到了问题根源：所有表格行都用了同一个id="mainTR"，而getElementById()只会返回匹配到的第一个元素，所以每次触发删除时，都只会选中第一行。

下面给你几种实用的解决方案，你可以根据自己的需求选择：

方案1：给每行设置唯一ID，删除时传入对应标识 #

我们可以利用循环的索引给每行生成唯一的ID，然后在点击删除按钮时把对应的索引传进去，就能精准找到要删除的行了：

function render(){
  for (let i = 0; i < allMovie.length; i++) {
    var tr = document.createElement('tr');
    tr.setAttribute("id", `mainTR-${i}`); // 用索引生成唯一ID
    table.appendChild(tr);
    // 以下td创建代码保持不变
    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);
    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);
    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);
    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);
    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button onclick="remove(${i})"> X </button>` // 传入索引
    tr.appendChild(td5);
  }
}
function remove(index) {
  var removeOBJ = document.getElementById(`mainTR-${index}`);
  if(removeOBJ) removeOBJ.remove(); // 先判断元素存在再删除，避免报错
}

方案2：利用事件对象定位当前行（无需ID） #

这种方法不用维护唯一ID，直接通过点击事件的源头（按钮），往上找到它所在的表格行，更灵活：

function render(){
  for (let i = 0; i < allMovie.length; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    // 以下td创建代码保持不变
    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);
    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);
    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);
    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);
    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button onclick="remove(event)"> X </button>` // 传入事件对象
    tr.appendChild(td5);
  }
}
function remove(event) {
  // 用closest找到最近的tr元素，比一层层parentNode更可靠
  const targetTr = event.target.closest('tr');
  if(targetTr) targetTr.remove();
}

方案3：事件委托（推荐，性能更优） #

如果你的表格行是动态生成的（比如后续还会添加新行），事件委托是最好的选择——只需要给表格绑定一次事件，就能处理所有按钮的点击，不用给每个按钮单独绑定：

// 先给表格绑定点击事件，可以放在页面初始化时执行
table.addEventListener('click', function(event) {
  // 判断点击的是删除按钮
  if(event.target.tagName === 'BUTTON' && event.target.textContent.trim() === 'X') {
    const targetTr = event.target.closest('tr');
    if(targetTr) targetTr.remove();
  }
});

function render(){
  for (let i = 0; i < allMovie.length; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    // 以下td创建代码保持不变
    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);
    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);
    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);
    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);
    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button> X </button>` // 这里不用加onclick了
    tr.appendChild(td5);
  }
}

这几种方案都能解决你的问题，其中事件委托的方式更适合动态表格，维护起来也更省心~

内容的提问来源于stack exchange，提问作者Hamza SAMI