CODEWITHSUNDEEP
jqueryhtmlcss
Matt
Matt

Reputation: 429

jQuery Remove element where child is not

So I am trying to hide all table rows where the anchor in that tr does not have an id of x.

I have got this, but it doesn't work, is it selected wrong or not possible this way?

<table><tr><td><a id="x">X</a></td></tr></table>
...
$("table tr:not(td a#x)").hide();

Thanks

Upvotes: 1

Views: 342

Answers (6)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

1) IDs cannot be reused more than one time on a single html page
2) Use classes instead

You can either use the CSS :not or the jQuery .not() as a selector.

Performance wise also proven by this jsperf link the CSS :not selector is much faster.

$('table tr:not(:has(".x"))').hide();

The main selector selects all table tr using the CSS :not selector and then using the :has jQuery selector checks if any children element have the .x class. I suggest you to edit your html structure and do not use ids for this matter unless you have only one instance of them on a single html page.

This is a similar to the user 'underfined' answer but it is slightly faster.

I have created an example for you:

DEMO: http://jsfiddle.net/7ceRx/4/


In case you want to use it with IDs instead of classes:

 $('table tr:not(:has("#x"))').hide();

Upvotes: 2

CristiC777
CristiC777

Reputation: 481

I found solution

HTML

 <table border="1" style="border:1px solid #FFCC00;color:#000000;width:100%" cellpadding="3" cellspacing="3">
<tr>
    <td><a id="x">Table Cell 11</a></td>
    <td><a id="x">Table Cell 12 </a></td>
</tr>
<tr>
    <td><a id="y">Table Cell 21 </a></td>
    <td><a id="x">Table Cell 22</a></td>
</tr>
<tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
</tr>
 </table>
 <br>
 <button id="button">Hide all a tag with id=x</button>

JS

 $(document).on('click', 'button', function(e){
  // $('a#x').html($('a#x').text(' '));
   $("a#x").hide();
 //console.log('onClick func');    
})

HERE IS THE DEMO

Upvotes: -2

Ram
Ram

Reputation: 144689

You could also use the not method and :has selector:

$("table tr") // all `tr` elements
  .not(':has(#x)') // not having `#x` descendant
  .hide();

Upvotes: 2

aahhaa
aahhaa

Reputation: 2275

or you can travel through DOM, .closest();

$("#x"). closest('tr').hide(); // this will hide the entire row

Upvotes: -1

derdida
derdida

Reputation: 14904

you cannot use multiple IDs with the same value. Use class instead

So:

<table><tr><td><a class="x">X</a></td></tr></table>

And then you can easy hide them by using:

$('a:not(.x)').closest('tr').hide();

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

You're going to have to change your x ID to a class. It's not possible to have more than 1 of the same ID on a page. But using classes you can use filter to get rid of results you don't want. !$('td a', this).hasClass('x'); will find td a in the tr and check if it has the class. next it returns the opposite because you only want to hide trs that do not have a.x.

$("table tr").filter(function(){
    return !$('td a', this).hasClass('x');
}).hide();

Upvotes: 2

Related Questions