修改

Question

我有一个HTML表，其最后一列的每一行都有一个删除按钮。通过单击其中一个按钮，我希望能够删除它所在的整行。以下代码删除按钮本身，但我无法删除整行：

var bns = document.getElementsByTagName("button");
  for (var i = 0; i < bns.length; i++) {
    bns[i].addEventListener("click", function()
  {
   this.parentNode.parentNode.removeChild(this);    
  });
  }

我的HTML看起来像：

<body>
  <table class="table">
    <thead>
     <tr>
        <th>Students</th>
     </tr>
     <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Delete</th>
    </tr>
  </thead>   
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@doe.us</td>
      <td><button>X</button></td>
    </tr> 

    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@doe.us</td>
      <td><button>X</button></td>
    </tr> 
</tbody>
</table>

Answer 1

我认为这是removeChild(this)问题。这是在<tr>上调用的，但它告诉它删除this这个按钮。

尝试：

var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);

或者使用诸如jQuery之类的框架，它将是：

$(this).parent().parent().remove();

修改

完整的jQuery代码实际上也很简短：

$(document).ready(function(){
    $('button').click(function(){
        $(this).parents('tr').remove();
    });
});

Answer 2

您可以使用HTMLTableElement.deleteRow()删除HTML表格行。我已经为每个按钮添加了一个onclick事件，它将调用deleteRow函数，该函数使用rowIndex＆amp; deleteRow()。它不需要jquery来执行操作

HTML

<table class="table" id="table">
    <thead>
     <tr>
        <th>Students</th>
     </tr>
     <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Delete</th>
    </tr>
  </thead>   
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@doe.us</td>
      <td><button onclick="deleteRow(this)">X</button></td>
    </tr> 

    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john1@doe.us</td>
      <td><button onclick="deleteRow(this)">X</button></td>
    </tr> 
</tbody>
</table>

JS

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("table").deleteRow(i);
}

DEMO HERE

遍历表中的DOM

2 个答案:

修改