我在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>
(...)
到目前为止，最后一列包含静态＆＃39;删除＆＃39;串。当用户点击那里的删除链接时，有没有办法动态删除行？
这是我的小提琴：http://jsfiddle.net/fyw6kajm/1/
答案 0 :(得分：2)
或者您可以将最后td内的删除包含在一个锚标记内，并为其添加一些类名，比如remove并写一个click event那个班。
例如：
<强> HTML
<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>
<强> JS
$('.remove').on('click',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
如果内容是动态添加的，您可以执行event delegation，如下所示：
$("#dataTables-example").on('click','.remove',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
<强> DEMO
答案 1 :(得分：1)
您可以在行的最后一行或包含文本的行中包含委派的点击事件以及.closest()和.remove()，以便遍历到最近的行并分别将其删除：
$('body').on('click','td:contains(Remove)',function(){
$(this).closest('tr').remove();
});
<强> Here
答案 2 :(得分：0)
制作按钮。
$("#trigger-overlay2").click(function() {
// $(this).toggleClass("active");
$(".overlay-boxify2").toggleClass("open");
});
$(document).on('click','.tr_remove',function(e){
e.preventDefault();
$(this).parents('tr').remove();
});.overlay-boxify, .overlay-boxify2 {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open, .overlay-boxify2.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
z-index:9999;
}
.overlay2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/grid.png);
background: rgba(222, 222, 222, 0.95);
overflow: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="trigger-overlay2" href="#contact">Trigger!</a>
<div class="overlay2 overlay-boxify2">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="tos-logo-contact">
<img src="../img/logo.png"></a>
</div>
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<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 tr_remove">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 tr_remove">Remove</td>
</tr>
<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 tr_remove">Remove</td>
</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 tr_remove">Remove</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
答案 3 :(得分：0)
这将删除整个tr / row-element及其子元素，但是您应该为您的删除按钮指定一个特定于此功能的类，例如js_remove_row。因为这个句柄：“tr＆gt; td：last-child”如果你改变了你的桌子就可以锁定其他东西。注意js-prefix让你知道这个类是一个javascript处理程序而不用于样式。我也使用$（document）.on ...因为如果ajax-load部分页面或表格没有中断，则文档总是在那里，如果重新加载内容，则不必重置处理程序。 / p>
这有效：
$(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();
});
答案 4 :(得分：0)
你只需要在删除td时添加类来调用click事件，并添加click事件以删除如下所示：
<td class="center removetd">Remove</td>
Jquery的：
$(".removetd").click(function(){
$(this).closest("tr").remove();
});
答案 5 :(得分：0)
尝试将click元素附加到tr元素，使用event.target，Node.textContent，如果$(this).remove()文字为＆＃34，则调用event.target删除＆＃34;
$("tr").click(function(e) {
if (e.target.textContent === "Remove") $(this).remove()
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<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>
(...)
</table>