咨询JavaScript中.remove()工作原理及表格同名元素无法批量移除问题

一、Element.remove()的工作原理 #

• Element.remove()是原生DOM提供的方法，作用是让调用该方法的元素自己从DOM树中移除。
• 和你之前尝试的removeChild()对比：
  • removeChild()必须通过父元素调用，格式是父元素.removeChild(要删除的子元素)，你得先找到目标元素的父节点才能用；
  • remove()则是目标元素直接调用自身方法，比如某元素.remove()，不需要找父节点，语法更简洁，这也是它比removeChild()上手更简单的原因。

二、为什么你的代码无法移除所有同名元素？ #

你的当前代码根本没写“匹配并删除同名元素”的逻辑——点击按钮时只是删掉当前行的几个单元格，完全没判断其他行的名称是否和当前行一致，自然做不到移除所有同名项。

另外先提个代码里的低级错误：你把amount和date的DOM元素拿反了：

var amount = document.getElementById('date');
var date = document.getElementById('amount');

这会导致表格里的日期和金额显示颠倒，得先修正。

三、修改后的代码（实现删除当前行+支持删除所有同名行） #

如果你的需求是点击移除按钮时，删除所有和当前行名称相同的支出项，修改代码如下：

const submit = document.getElementById('submit');

submit.addEventListener('click', function(){
    // 修正变量名错误
    var nameInput = document.getElementById('name');
    var dateInput = document.getElementById('date');
    var amountInput = document.getElementById('amount');
    var table = document.getElementById('table');

    var newRow = table.insertRow(-1);
    var newCell0 = newRow.insertCell(0);
    var newCell1 = newRow.insertCell(1);
    var newCell2 = newRow.insertCell(2);
    var removeCell = newRow.insertCell(3);

    var text0 = document.createTextNode(nameInput.value);
    newCell0.appendChild(text0);
    var text1 = document.createTextNode(dateInput.value);
    newCell1.appendChild(text1);
    var text2 = document.createTextNode(amountInput.value);
    newCell2.appendChild(text2);
    
    var btn = document.createElement('button');
    btn.innerHTML = "Remove";
    removeCell.appendChild(btn);

    btn.addEventListener('click', function(){
        // 1. 获取当前行的支出名称
        const targetName = newCell0.textContent.trim();
        
        // 2. 遍历表格所有行，找出所有同名的行并删除
        // 若表格有表头，可自行判断跳过表头行
        const rows = table.querySelectorAll('tr');
        rows.forEach(row => {
            const rowName = row.cells[0]?.textContent.trim();
            if (rowName === targetName) {
                row.remove(); // 直接删除整行，比逐个删单元格高效
            }
        });
    });
});

关键修改点说明 #

1. 修正了date和amount的DOM元素获取错误，避免数据显示混乱；
2. 移除逻辑从删除单个单元格改成直接删除整行row.remove()，更简洁高效；
3. 新增“获取目标名称→遍历所有行→匹配并删除同名行”的逻辑，实现你要的“移除所有同名元素”的需求。

内容的提问来源于stack exchange，提问作者Adrian Ralston