如果表数据不包含特定类,则删除表行

时间:2021-10-28 23:04:30

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();
});

Updated fiddle

更新小提琴

#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();
});

Updated fiddle

更新小提琴

#2


1  

simply make it

简单地说吧

$(document).ready(function() {
    $(".onlyhtml5").click(function(event) {
        event.preventDefault();
        $('table tr td').not('.html5badge').each( funtion(){
           $( this ).parent().remove();
        } ); 
    });
});