1

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

8
  • 3
    From your question it looks like you're reusing the same id multiple times. That won't fly, even if we help you with the selector. Jul 31, 2014 at 19:09
  • Use same class instead of id. Jul 31, 2014 at 19:11
  • Using :has selector: $("table tr").not(':has(#x)').hide();
    – Ram
    Jul 31, 2014 at 19:14
  • @undefined why didn't you make an asnwer? this is the easiest. Jul 31, 2014 at 19:18
  • @undefined I agree, this is easier than my filter method. Jul 31, 2014 at 19:26

6 Answers 6

2

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

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

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();
1
  • 1
    You should explain it to the OP. Jul 31, 2014 at 19:13
2

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();
2
  • Ok, sorry I did not read the answer carefully. I will edit my answer with a different method. Jul 31, 2014 at 19:51
  • Just posted, I hope it's better now. :) Jul 31, 2014 at 19:59
0

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();
1
  • Same question to you, what if the anchor contains a table? Just to make your life harder =P Jul 31, 2014 at 19:20
-1

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

$("#x"). closest('tr').hide(); // this will hide the entire row 
1
  • What if the anchor contains a table? Haha =P The OP wants to hide the row without the a#x. Jul 31, 2014 at 19:18
-2

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

1
  • I didn't read carefully .. about hide rows .. is more easy .. But I see you already have a lot of solution ..
    – CristiC777
    Aug 1, 2014 at 4:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.