Hide button based on class using jquery

Question

I'm trying to hide a button if it has a class "List" and if not display it. On load itself I'm displaying the button, and later if that has a class, I'm hiding it using jquery. It works too!. But I'm not sure that it is the best way to do it. Any suggestions? Here is my code

$('.ProductList').parent().find('.CompareButton').show();
   if($('ul.ProductList').hasClass('List')) {
           $(this).find('.CompareButton').hide();
   }

kangaswad · Accepted Answer · 2014-05-05 06:19:27Z

3

Try to change this part

$(this).find('.CompareButton').hide();

into:

$('.CompareButton').hide();

answered May 5, 2014 at 6:19

kangaswad

7856 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mithun Satheesh · Accepted Answer · 2014-05-05 06:15:25Z

0

i dont think $(this) will refer to $('ul.ProductList') as per your given code.

you may have to try out

$('ul.ProductList').find('.CompareButton').hide();

instead of

$(this).find('.CompareButton').hide();

answered May 5, 2014 at 6:15

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

2 Comments

Nizam Ali Over a year ago

@Sateesh, No. I need to check if <ul class='ProductList'> has that class, then only I need to hide it.

Mithun Satheesh Over a year ago

@NizamAli : I am not telling you to remove all code. just that the $(this) u are refering to will not refer to the object you are expecting it to be.

sshet · Accepted Answer · 2014-05-05 06:17:39Z

0

By default if you want to display it then assign display:block in your html code, later on ready document you can call a function to hide it

$(document).ready(function() {
showButton();

});

function showButton() {
if($('ul.ProductList').hasClass('List')) {
           $(this).find('.CompareButton').hide();
   } 

}

answered May 5, 2014 at 6:17

sshet

1,1541 gold badge6 silver badges18 bronze badges

1 Comment

Nizam Ali Over a year ago

I shouldn't write any code on HTML code. I need to write only in JS file.

Omar Sedki · Accepted Answer · 2014-05-05 06:21:18Z

0

The easily thing is add to your css 2 statement one without class list display:block & One With class list display:nonelike this .
when you add the class. Statement 2 will be Evaluted & when you removed Statement 1 will be Evaluted.

ul.ProductList.List  {display:block}
ul.ProductList.List .CompareButton {display:none}

edited May 5, 2014 at 6:21

answered May 5, 2014 at 6:15

Omar Sedki

6336 silver badges16 bronze badges

Comments

paulitto · Accepted Answer · 2014-05-05 06:24:30Z

0

Your jquery code can be at least shortened a bit.

// this can be shown in css by default
$('.ProductList').parent().find('.CompareButton').show(); 
//this replaces your if statement
$('.ProductList.List').parent().find('.CompareButton').hide();

But better way would be to hide what you need in css without using javascript at all.

answered May 5, 2014 at 6:24

paulitto

4,6932 gold badges24 silver badges28 bronze badges

3 Comments

Nizam Ali Over a year ago

The condition is I shouldn't use any css code or any HTML code. So, that's why I need to check it using IF condition

paulitto Over a year ago

$('.ProductList.List') would select ul that has both .ProductList and .List, isnt that what you want?

Nizam Ali Over a year ago

I need to check whether <ul class='ProductList'> it has the class 'List' or not. If not then I shouldn't compile that statement. I hope that makes sense :)

Collectives™ on Stack Overflow

Hide button based on class using jquery

5 Answers 5

Comments

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related