Question

解决方案可以使用jQuery或纯JavaScript。

我想在用户单击表格行单元格中包含的相应按钮后删除表格行，例如：

<script>
function SomeDeleteRowFunction() {
 //no clue what to put here?
}
</script>

<table>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
</table>

Answer 1

您可以使用jQuery click而不是onclick属性，请尝试以下操作：

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

Demo

Answer 2

你可以这样做：

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>

Answer 3

以下解决方案工作正常。

<强> HTML：

<table>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
</table>

<强> JQuery的：

function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

我在http://codebins.com/bin/4ldqpa9

上做过垃圾箱

Answer 4

使用纯Javascript：

不需要将this传递给SomeDeleteRowFunction()：

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>

onclick函数：

function SomeDeleteRowFunction() {
      // event.target will be the input element.
      var td = event.target.parentNode; 
      var tr = td.parentNode; // the row to be removed
      tr.parentNode.removeChild(tr);
}

Answer 5

正如@gaurang171 提到的，我们可以使用 .closest() 返回第一个祖先，或者最接近我们删除按钮的，并使用 .remove() 删除它。

这是我们如何使用 jQuery click 事件而不是使用 JavaScript onclick 来实现它。

HTML：

<table id="myTable">
<tr>
  <th width="30%" style="color:red;">ID</th>
  <th width="25%" style="color:red;">Name</th>
  <th width="25%" style="color:red;">Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-001</td>
  <td width="25%" style="color:red;">Ben</td>
  <td width="25%" style="color:red;">25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-002</td>
  <td width="25%" style="color:red;">Anderson</td>
  <td width="25%" style="color:red;">47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-003</td>
  <td width="25%" style="color:red;">Rocky</td>
  <td width="25%" style="color:red;">32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td width="30%" style="color:red;">SSS-004</td>
  <td width="25%" style="color:red;">Lee</td>
  <td width="25%" style="color:red;">15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

jQuery

 $(document).ready(function(){
     $("#myTable").on('click','.btnDelete',function(){
         $(this).closest('tr').remove();
      });
  });

在 JSFiddle 中尝试：click here。

单击表行删除按钮后删除表行

5 个答案: