点击表格行删除按钮后删除表格行

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>

- like-a-trainee

Answer 1

您可以使用jQuery的click代替使用onclick属性，尝试以下方法：

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

演示

- Ram

---

它不起作用，我应该让你知道我正在动态添加我的表格行$('.mytable tr:last').before(.....这可能与此有关吗？ - like-a-trainee

@like-a-trainee 是的，你应该委托事件，请尝试更新后的答案。 - Ram

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>

- Siren

---

完美运行，对于这样简单的任务，YouMightNotNeedJquery非常适用。 - d.raev

@Siren，我很确定可以这样做！除了感谢你之外，你是否有一些链接可以解释你的parentNode(s)链？我想正确地理解你所做的“计算”。谢谢，我一直无法摆脱它。是的，我喜欢YouMightNotNeedJquery这个事实。 - Robert

救了我的一天。最简单和最直接的答案。 - Ajay Kumar

Answer 3

使用纯JavaScript：

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

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

onclick函数：

function SomeDeleteRowFunction(event) {
      // 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);
}

- A-Sharabiani

Answer 4

以下解决方案可以正常运行。 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上完成了一个bin。

- gaurang171

Answer 5

如@gaurang171所提到的，我们可以使用.closest()方法来返回第一个祖先元素或最接近我们删除按钮的元素，并使用.remove()方法将其删除。

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

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

table{
  width: 100%;
  border-collapse: collapse;
}

table td{
  border: 1px solid black;
}
button:hover{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
  <th>ID</th>
  <th >Name</th>
  <th>Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td >SSS-001</td>
  <td >Ben</td>
  <td >25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-002</td>
  <td >Anderson</td>
  <td >47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-003</td>
  <td >Rocky</td>
  <td >32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-004</td>
  <td >Lee</td>
  <td >15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

- NcXNaV