.removeClass('visible').addClass('invisible'); vs. .hide() or .show()

Question

I am an intern and I came across some code like the above in the title.

$(".someClass").removeClass('visible').addClass('invisible');
$(".someClass").removeClass('invisible').addClass('visible');
//there are css classes for this that set display to none etc.

It is buggy and I was charged with changing some UI stuff so I thought I would replace the above with .hide() and .show() correspondingly. The bugs have more or less disappeared. What are the advantages of one way over the other? In this case the latter appears to have worked better, so why would you implement it the first way?

EDIT:

I am just trying to show and hide page elements depending on what page options have been chosen. Which option is best practice?

Answer 1

 $(selector).hide();

and

 $(selector).show();

simply adds

 style="display:none;"

and

 style="display:block;"

respectively to the selector.

When you add and remove classes, you can add a myriad of styles and manage them in your style sheet.

Personally, when I'm simply showing or hiding a selector via jQuery, I use

 show();
 hide();

or

 toggle();

Answer 2

.removeClass('visible').addClass('invisible'); - gives an element a class, that can have one or more properties, in this case it's probably display: none and display: block (or table, or.. something else, you can't know)

.hide() and .show() - does not mess with the element's classes, it changes its style directly with display: none and display: block (or whatever type of visibility it had before)

It depends on the situation which to use. You have more control when you add and remove classes though, but probably less performance.

EDIT: Holy Moly, the comment dude is right, I have been living in a lie. I wonder if I experienced a bug or something back in the day when I was 100% sure it did not restore its default visibility, but assign "block" to it by force.

jquery site says:

This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Answer 3

Hide and show methods are using style inline code

style="display:block"
style="display:none"

And show method always add "display:block". If you need use for example display:inline-block - you should use your classes, if not - you can use show and hide.

Also instead of combination show and hide you can use method toggle

Answer 4

Generally hiding and showing elements via CSS is a good practice, but this is a bad way of going about it.

If you're going to hide and show elements by toggling CSS classes, do so by toggling a semantic class on the highest level element that makes sense. Move a single higher-level element between known states like .showing-post or .creating-comment, and let that trickle down to all its children elements, hiding some elements, resizing others, etc etc.

Don't add classes like invisible or visible to the elements themselves, that's drastically over-complicated and a reinvention of the already available .show() and .hide().