Hide/override CSS Classes Dynamically

I have the following HTML.

Solution 1:

If you want to dynamically remove the class from the last span element, here is some jQuery:

$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');

jsFiddle example

If you want to remove the class from all the span elements:

$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');

jsFiddle example

---

Based on your update, it seems as though you want something like this though.

#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
    /* style */
}

Using the :not selector, you can exclude styling from the last span element.

jsFiddle example

Solution 2:

You can use CSS to select the last element, or every other element depending on your needs.

#form span:last-child {
    display: none;
}

Share