JavaScript表格行移除remove(btn)函数功能失效问题排查

自定义remove(btn)函数绑定在表格行的Remove按钮上，预期点击后实现以下逻辑：

• 将当前操作行添加到已移除元素表格中，递增已移除元素计数器
• 主表格元素计数器递减
• 将对应行从主表格中移除
  实际运行时函数异常，始终无法定位故障点。

两个核心问题导致逻辑完全失效：

1. 函数命名冲突：自定义函数名remove和DOM原生内置的Node.remove()API重名，内联onclick事件触发时，作用域链会优先遍历DOM元素自身的方法，根本不会执行你在全局定义的remove函数，点击时只会调用原生方法删除按钮本身，和预期逻辑完全不符。
2. DOM操作逻辑顺序错误：DOM规范明确规定，对页面中已存在的节点执行append()/appendChild()操作时，节点会自动从原父节点下脱离，不需要额外手动执行删除操作。原代码先把行追加到已移除表格，此时行的父节点已经变成已移除表格，再执行row.parentNode.removeChild(row)等于把刚移过去的行直接删掉，自然看不到已移除表格内的内容。
3. 原代码缺失已移除元素计数器的递增逻辑，不符合最初的需求设计。

1. 将自定义的remove函数重命名为removeRow，避免和原生API命名冲突，同时修改行内onclick绑定的方法名保持一致。
2. 删除冗余的手动删行逻辑，节点追加到已移除表格后不需要额外执行删除操作。
3. 补充已移除元素计数器的递增逻辑。

JavaScript 部分 #

var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");

function addToTable() {
  var radio = document.getElementsByName("content");
  var radio_selected;
  for (var a = 0; a < radio.length; a++) {
    if (radio[a].checked) {
      radio_selected = radio[a].value;
    }
  }
  output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" +
    "<td>" + author.value + "</td>" +
    "<td>" + radio_selected + "</td>" +
    "<td>" + "<input type='button' onclick='post(this);' value ='Post'>" +
    "<input type='button' onclick='removeRow(this);' value ='Remove'>" + "</td>" + "</tr>"
}

function counter() {
  var brojac = document.getElementById("counterForElements");
  brojac.innerHTML = parseInt(brojac.innerHTML) + 1;
}

function removeRow(btn) {
  var row = btn.parentNode.parentNode;
  var removed = document.getElementById("removed");
  removed.append(row);
  // 主表格计数器递减
  var brojac = document.getElementById("counterForElements");
  brojac.innerHTML = parseInt(brojac.innerHTML) - 1;
  // 已移除元素计数器递增
  var removedCounter = document.getElementById("removedCounter");
  removedCounter.innerHTML = parseInt(removedCounter.innerHTML) + 1;
}

function post(btn) {
  var row = btn.parentNode;
  row.parentNode.style.backgroundColor = "Green";
  btn.setAttribute("disabled", "true");
  btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}

CSS 部分 #

label {
  width: 100px;
  display: inline-block;
}

table,
th,
td,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  text-align: center;
}

HTML 部分 #

<div>
  <div>
    <label for="Title">Title</label>
    <input type="text" id="title">
  </div>
  <div>
    <label for="Author">Author</label>
    <input type="text" id="author">
  </div>
  <div>
    <label for="content" id="contentlabel">Content type</label>
    <input type="radio" name="content" value="Free" class="content">Free
    <input type="radio" name="content" value="Paid" class="content">Paid
  </div>
</div>
<div>
  <input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
  <table>
    <thead>
      <th style="width:40%;">Title</th>
      <th style="width:40%;">Author</th>
      <th style="width:10%;">Type</th>
      <th style="width:10%;">Button</th>
    </thead>
    <tbody id="output">

    </tbody>
  </table>
</div>
<div>
  <h1>Number of elements: <span id="counterForElements">0</span></h1>
  <h1>Removed elements: <span id="removedCounter">0</span></h1>
  <table id="removed">

  </table>
</div>

用innerHTML +=拼接表格行的写法存在隐患，会重置tbody下原有元素绑定的事件、输入状态，更稳妥的实现方式是用document.createElement创建DOM节点后，调用appendChild方法插入到表格中。

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