试图创建一个带有按钮的表来删除每一行，但它只对一行有效（javascript）？

这是我的javascript，一旦我单击一个按钮，它就会删除该行，但其他按钮什么也不做

var removeRowBtns = document.getElementsByClassName("removeRowBtn")
var tableRows = document.getElementsByTagName("tr")

for(var i = 0; i < removeRowBtns.length; i++) {
removeRowBtns[i].addEventListener("click", function() {
  tableRows[i].parentNode.removeChild(tableRows[i]);
    });
}

var removeRowBtns=document.getElementsByClassName（“removeRowBtn”）
var tableRows=document.getElementsByTagName（“tr”）
对于（变量i=0；i

这是我的HTML：

<table class="table table-bordered">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Email Address</th>
  <th>Remove</th>
</tr>
<tr>
  <td>name</td>
  <td>name</td>
  <td>email</td>
  <td><button class="btn btn-danger removeRowBtn">X</button></td>
</tr>
<tr>
  <td>name</td>
  <td>name</td>
  <td>email</td>
  <td><button class="btn btn-danger removeRowBtn">X</button></td>
</table>
  <script type="text/javascript" src="table.js"></script>

名字
姓
电子邮件地址
去除
名称
名称
电子邮件
X
名称
名称
电子邮件
X

事件处理程序在循环结束后很长时间内执行

变量

i

始终是循环的最后一个值。将按钮与需要删除的表行关联，并使用事件处理程序的

e.target

获取对它的引用

例如，可以使用以下类型的标记：

<tr id="r15"></tr>  <input type="button" rawLink="r15" value="Delete"></input>

像这样

for(var i = 0; i < removeRowBtns.length; i++) {
   removeRowBtns[i].addEventListener("click", function(e) {
      var raw = document.getElementById(e.target.getAttribute("rawLink"));
      raw.parentNode.removeChild(raw);
    });
}

for（变量i=0；i

查看javascript闭包。

i

的值在循环中的传播方式与您认为的不同。另一种方法是为每个按钮调用相同的函数。此函数将通过

This

关键字获取对已单击按钮的引用。从那里，您沿着DOM树往回走，直到找到包含它的TR元素。然后你用核弹炸了那个TR。这里肯定有一千个问题是关于同一个主题的。