I got a question regarding removing table rows within a table. I got the following HTML:
我有一个关于删除表中的表行的问题。我得到以下HTML:
<table>
<tr>
<td class="html5badge"><a href="">autofocus</a></td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td><a href="">disabled</a></td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge"><a href="">test</a></td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td>
does not contain the html5badge
class and delete the parent: <tr>
.
我需要一种机制来查看第一个是否不包含html5badge类并删除父类:。
To do this I created the following jQuery code:
为此,我创建了以下jQuery代码:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
这有效,但它并不完全符合我的要求。正如您在我的JSFIDDLE中看到的,它将删除所有表行。但我想要的是以下所需的输出:
<table>
<tr>
<td class="html5badge"><a href="">autofocus</a></td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge"><a href="">test</a></td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr>
that contained the text: disabled is been removed! Based on the fact that the <td>
within this <tr>
does not contained the class: html5badge
.
所需的输出是包含text:disabled的已被删除!基于此中的不包含类:html5badge的事实。
How can I achieve this?
我怎样才能做到这一点?
2 个解决方案
#1
3
You can use filter()
to retrieve the tr
elements which do not contain td.html5badge
and remove them:
您可以使用filter()来检索不包含td.html5badge的tr元素并将其删除:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
更新小提琴
#2
1
simply make it
简单地说吧
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});
#1
3
You can use filter()
to retrieve the tr
elements which do not contain td.html5badge
and remove them:
您可以使用filter()来检索不包含td.html5badge的tr元素并将其删除:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
更新小提琴
#2
1
simply make it
简单地说吧
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});