I am having an issue with giving the user the option to "wipe clean" or "nullify" ratings after they have given those ratings by hovering over them and clicking. Consider the classic 5-star rating. Once the user assigns a rating by hovering and clicking, then can change it to any number of stars by repeating the process, but what if they want to take it away altogether? My current solution is to give a border and a "delete cross" on the top right corner so they can just wipe it clean by clicking on the cross. But i am open to suggestions.
One option that you have is to create another state on your rating component, the "Not Rated" state. Add one extra asterisk at the beginning and add below it the label "Not rated", give it a different color from the rest of the asterisks i.e. blue. The initial state of the new asterisk must be filled, once a rating is selected the first asterisk turns into hollow. The user can revert to the "Not rated" state by simply clicking on the first asterisk labeled not rated. Something like this :