Javascript 我在引导程序中有一个表-如何添加包含选定行的“删除”按钮的列？

我在bootstrap中创建了一个表，基本上它包含不同的列和行，例如：

<thead>
    <tr>
        <th>Location</th>
        <th>Date</th>
        <th>Time</th>
        <th>Duration</th>
        <th>Content</th>
        <th>Remove</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center">4</td>
        <td class="center">X</td>
        <td class="center">Remove</td>
    </tr>
    <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
        <td class="center">Remove</td>
    </tr>
    (...)

位置
日期
时间
期间
内容
去除
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
去除
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
去除
(...)

到目前为止，最后一列包含静态“Remove”字符串。当用户点击删除链接时，是否有一种方法可以动态删除该行

---

这是我的提琴：

您可以在最后一行的td上或包含文本的行上委派click event remove，以及

.closest（）

和

.remove（）

分别用于遍历最近的行和删除它：

$('body').on('click','td:contains(Remove)',function(){
  $(this).closest('tr').remove();
});

制作按钮

$（“#触发器覆盖2”）。单击（函数（）{
//$（此）.toggleClass（“活动”）；
$（“.overlay-boxif2”）.toggleClass（“打开”）；
});
$（文档）.on（'click'，'tr_remove'，函数（e）{
e、 预防默认值（）；
$（this.parents（'tr'）.remove（）；
});
.overlay-boxify、.overlay-boxif2{
可见性：隐藏；
不透明度：0；
-webkit转换：不透明度0.5s，可见性0.5s；
过渡：不透明度0.5s，可见性0.5s；
}
.overlay-boxify.open、.overlay-boxify.open{
能见度：可见；
不透明度：1；
-webkit转换：不透明度0.5s；
过渡：不透明度0.5s；
z指数：9999；
}
.覆盖2{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图像：url（../img/grid.png）；
背景：rgba（2222222220.95）；
溢出：滚动；
}

位置
日期
时间
期间
内容
去除
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
去除
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
去除
三叉戟
Internet Explorer 5.5
赢得95分+
5.5
A.
去除
三叉戟
Internet Explorer 6
赢98+
6.
A.
去除
三叉戟
Internet Explorer 7
赢XP SP2+
7.
A.
去除
三叉戟
AOL浏览器（AOL桌面）
赢XP
6.
A.
去除
壁虎
火狐1.0
Win 98+/OSX.2+
1.7
A.
去除
壁虎
火狐1.5
Win 98+/OSX.2+
1.8
A.
去除
壁虎
火狐2.0
Win 98+/OSX.2+
1.8
A.
去除
<tr class="odd gradeA">
     <td>Trident</td>
     <td>Internet Explorer 5.5</td>
     <td>Win 95+</td>
     <td class="center">5.5</td>
     <td class="center">A</td>
     <td class="center"><a class='remove' href="#">Remove</a></td> <!--wrap in anchor tag-->
</tr>
<tr class="even gradeA">
     <td>Trident</td>
     <td>Internet Explorer 6</td>
     <td>Win 98+</td>
     <td class="center">6</td>
     <td class="center">A</td>
     <td class="center"><a class='remove' href="#">Remove</a></td>
</tr>

$('.remove').on('click',function(){
   $(this).closest('tr').remove(); //remove its root parent tr using closest
});

$("#dataTables-example").on('click','.remove',function(){
   $(this).closest('tr').remove(); //remove its root parent tr using closest
});

$(document).on("click", "tr > td:last-child", function() {
  $(this).parent().remove(); 
});

<td class="center js_remove_row">Remove</td>

$(document).on("click", ".js_remove_row", function() {
      $(this).parent().remove(); 
    });

<td class="center removetd">Remove</td>

$(".removetd").click(function(){
  $(this).closest("tr").remove();
});