Question

I have the following:

container.removeClass("ui-state-error-icon").removeClass("ui-icon-alert");
container.addClass("ui-state-error-icon").addClass("ui-icon-alert");

Is there a simple way that I can also add and remove the following CSS?

display: inline-block;

I looked at the jQuery documentation and found this:

$(this).css("color","red");

But how would I remove the display parameter?

Thanks

Answer 1

You know you can pass several classnames in removeClass and addClass like this, separated by whitespace:

 container.removeClass("ui-state-error-icon ui-icon-alert");
 container.addClass("ui-state-error-icon ui-icon-alert"");

To change the “display” css rule, use .css() as you saw in the doc.

Now you cannot exactly add or remove the css rule, you have to replace the value of “display” by something else, and it depends on what you want to achieve:

You can set the value to empty string to remove the inline css rule. As @nnnnnn stated, the value of “display” will then be – either the one defined in a remaining css class applied to the element – or the default value of “display” for the type of element.

container.css('display', ''); 

Values of the rule “display” – display (css property)

Inline elements

Block-level elements