Jquery remove an unspecified class from an element or delete all classes except for some

Question

Jquery remove an unspecified class from an element or delete all classes except for some

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have an HTML element select # options that when selecting one of the options it will dynamically add classes to the div # container element, but I need to delete the class that was previously added to this element and then add the new class to the selected option.

If you notice, the classes are always added but, but they are still the same ones that were added.

$(function(){
  $(document).on('change', 'select#options', function(){
    
    var option_selected = $(this).val();
    $('#container').addClass(option_selected);
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

I appreciate your help.

javascript jquery html css

asked by Learning and sharing 26.09.2017 в 23:12

source

3 answers

1

You could change the line

$('#container').addClass(option_selected);

for

$('#container').removeClass("style1 style2 style3 style4 style5" ).addClass(option_selected);

answered by 26.09.2017 в 23:39

0

Hello indeed in each call you can delete "All classes".

$('#container').removeClass();  // sin parametros quita todas las clases

Another option can be:

$('#container').attr('class', '');  // quita todas las clases

Then you make your .addClass() as always.

answered by 28.09.2017 в 15:02

I can not compile Visual Studio 2017 Access a data inside a json object (no array)

score 1 · Accepted Answer

Using the function removeClassPrefix of this answer in SOen could leave it this way:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

$(document).on('change', 'select#options', function(){

    var option_selected = $(this).val();
    
    $('#container').removeClassPrefix('style').addClass(option_selected);   
    
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));    
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

The function removes all classes starting with the string style that may exist and then adds the style desired.