CODEWITHSUNDEEP
jqueryhtmlcss
Sanchila Nadeeshan
Sanchila Nadeeshan

Reputation: 3

remove multiple css classes with together using jquery

I am still a student in university and new to jQuery. I want to know how to remove CSS classes like these using jQuery:

.starrate span:hover:before,.starrate span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: orange;
    cursor: pointer;
}

I tried this:

$('#s10').on( "click", function() {
    var val = $(this).data("values5"); 

    $("#s10").html("<span>&bigstar;</span>");
    $("#s10").addClass("newstarrate");
    $("#s10").removeClass("starrate span:hover:before,.starrate span:hover ~ span:before");
});

But it doesn't work. How can I remove these classes?

Upvotes: 0

Views: 119

Answers (2)

Phil Gibbins
Phil Gibbins

Reputation: 502

From looking at your example, you are trying to over complicate things.

The only actual class involved is any text directly after a '.' up to the first space. The whole thing is a CSS selector, not a class. In your example, the only part which is a class in the CSS selectors above is '.starrate'.

Due to CSS specificity (the tree-like nature of DOM elements and the way CSS is applied), if you take out the "parent" class, the children will not be affected with the styles listed, so the following should remove the CSS styles:

$("#s10").removeClass("starrate");

Upvotes: 0

Pascal Heraud
Pascal Heraud

Reputation: 373

This will remove the class you just added :

 $("#s10").removeClass("newstarrrate")

You can't change the CSS definition if it was your purpose.

Upvotes: 1

Related Questions