Jquery REMOVE CLASS's STARTING WITH

[Craig Hopson]

Hi guys i'm prob going about this the wrong way but this is what i have so farThe HTML

<div class="example">    						<input type="radio" value="border-0" name="Border" id="text1" checked="checked"/>    						No Border    					</div>    					    					<div class="border-1 example">   						<input type="radio" value="border-1" name="Border" id="text2" />   						Single Line   					</div>   										<div class="border-2 example">   						<input type="radio" value="border-2" name="Border" id="text3" />	   						Double Line   					</div>   					   					<div class="border-3 example">   						<input type="radio" value="border-3" name="Border" id="text4" />   						3D Line   					</div>   					              <div class="font-1 example">                            <input type="radio" value="font-1" name="Font" id="text1" checked="checked"/>                            Normal Font                        </div>                                                <div class="font-2 example">                           <input type="radio" value="font-2" name="Font" id="text2" />                           Font 2                       </div>                                           <div class="font-3 example">                           <input type="radio" value="font-3" name="Font" id="text3" />                           Font 3                       </div>                                              <div class="font-4 example">                           <input type="radio" value="font-4" name="Font" id="text4" />                        Font 4                       </div><span id="regdisplay" class="">HELLO</span>

The JS

$(function() {  $('[name=Border]').click(function() {     	var classy = $(this).val();         $('#regdisplay').removeClass();    if($(this).is(':checked'))  {        $('#regdisplay').addClass(classy);   } });});$(function() {  $('[name=Font]').click(function() {     	var fonty = $(this).val();          $('#regdisplay').removeClass();    if($(this).is(':checked'))  {        $('#regdisplay').addClass(fonty);   } });});

The problem i have is once you selected the border and it has been applied to #regdisplay you then select a font but it will removeClass for the border.What i was thinking was removeClass(border-????) or removeClass(font-????) but not shore how or maybe i'm going about this all wrong.so help please.P.S. Please excuse the formatting.

[justsomeguy]

I don't use much jQuery, but I don't think it has a way to do that automatically. You would need to get the class string, split it up to get each individual class name, and loop through them and test each one to see if you want to remove it. If you pass the class name to removeClass it will remove only that class instead of all of them.

[dsonesuk]

Overcomplicating this! You have the checked inputs to go by? just join the checked values together to give classes separated by space

$(function() {  $('[name=Border]').click(function() {         //var classy = $(this).val();   $('#regdisplay').removeClass();   $('#regdisplay').addClass($('[name=Font]:checked').val()+" "+$(this).val() );   /* if($(this).is(':checked'))  {        $('#regdisplay').addClass(classy);   }*/ });  $('[name=Font]').click(function() {         //var fonty = $(this).val();          $('#regdisplay').removeClass();    $('#regdisplay').addClass($('[name=Border]:checked').val()+" "+$(this).val() );   /* if($(this).is(':checked'))  {        $('#regdisplay').addClass(fonty);   }*/ });});

[dsonesuk]

THIS removes all but NOT the currently opposing selected border or font class depending which is selected at time

$(function() {  $('[name=Border]').click(function() {      $('#regdisplay').not($('#regdisplay').attr('class', $('[name=Font]:checked').val())).removeClass();        $('#regdisplay').addClass($(this).val()); });  $('[name=Font]').click(function() {      $('#regdisplay').not($('#regdisplay').attr('class', $('[name=Border]:checked').val())).removeClass();        $('#regdisplay').addClass($(this).val()); });});