用jQuery remove()方法删除表格行(table tr)的写法

Query删除表行(table tr):本文介绍如何删除选定的表行(table tr)。如何用jQuery按钮单击事件,按id或class-name删除表行。 在按钮单击时,我们删除选定的行/ tr可能是其动态添加的表行或已在DOM上使用的。 使用jQuery .on()将能够通过指定其类名或Id来选择动态添加的元素,然后使用.remove()方法删除所选的表行。

输出

HTML:添加包含一些数据的HTML表(删除表格行)

首先,我们在HTML页面中添加了一个表标记,其中包含一些“tr”表行和“td”表数据以及一个名为Delete的按钮。 这里删除按钮用于删除特定的表行。我们的HTML结构如下面的代码所示。

<table id="tbUser">
  <tr>
    <th>Sr</th><th>Name</th><th>Location</th><th></th>
  </tr>
  <tr>
    <td>1</td><td>Amit</td><td>Ghatkopar</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>2</td><td>Vicky</td><td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>3</td><td>Sunny</td><td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>4</td><td>John</td><td>NewYork</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
</table>

在上表中,我们添加了一些数据,在每一行中,我们有一个公共类为“btnDelete”的按钮。 现在将在按钮单击时添加单击事件,单击它将从HTML表中删除该行tr。

:在按钮单击时删除表行(tr)的代码

在这里,首先我们在按钮标签上创建一个jQuery单击事件,然后使用nearest()方法选择tr,之后用remove()方法删除该tr,类似于使用.next()方法和.remove()删除下一个表行tr。 这是我们能够删除表格行的方式,我们的最终代码如下所示。

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

腾讯云618云聚惠活动【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】

百度云不止一折优惠【点击购买】

发表评论

电子邮件地址不会被公开。 必填项已用*标注