Problem to add class in second click to DIV

Depending on the order in which your selectors appear in your css, some have priority over others.

In your case, when you open the dialog you give the element the class fondo_rojo

$(this).addClass('fondo_rojo');

And then you take it off by assigning a white background

function quitarFondo(elemento){
    $(elemento).addClass('fondo_blanco');
}

At the end of this process your element has the two classes, .fondo_blanco and .fondo_rojo . Adding any of the two classes with the addClass method will no longer take effect.

As I said at the beginning, depending on the order (and specificity) of your CSS selectors, some have priority over others. In this case it seems that .fondo_blanco is set to .fondo_rojo when setting the background color.

Solution: remove one class before adding the other

$(this).removeClass('fondo_blanco').addClass('fondo_rojo');

and

function quitarFondo(elemento){
    $(elemento).removeClass('fondo_rojo').addClass('fondo_blanco');
}

I recommend you read the documentation carefully, since it is based on jquery, the most logical thing is that you can apply the modal to an element and you do not have to launch your modal, so the first thing you should look for when using a library is the callbacks.

Getting-started

Callbacks

I'll add an example:

  jQuery(document).ready(function() {

    $(this).addClass('fondo_rojo');
    var valorclick = $(this).val();
    var elemento = $(this)[0]; 

    $(".clave").confirm({
        theme: 'material',
        title:'Atencion',
        content:'¿Que desea hacer?',
        useBootstrap: false,
        boxWidth: '350px',
        buttons:{
            Borrar: function(){
                $.confirm({
                    title:'Atencion',
                    content:'¿Esta seguro de continuar y borrar el registro?',
                    useBootstrap: false,
                    boxWidth:'300px'
                });
            },
            Editar: function(){ funcionConsultarRegistro(valorclick) },
            Cancelar: function(){ 
	            var elemento = this.$target[0];
	        	elemento.classList.toggle("active");
        	}
        },onOpenBefore: function () {
        	var elemento = this.$target[0];
        	elemento.classList.toggle("active");
    }
});    

        });

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.1/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.1/jquery-confirm.min.js"></script>

<div class="clave" style="height: 100px; border: 1px solid red;"></div>

The reason is simple:

  

When you add a second class that has the same rules, or a   subset of them than the first class, you must first eliminate this   since there will simply be a conflict between them. The class that is defined later in the CSS file will always prevail.

Unless you define the priority in any of them by !important , this will always be the case. The solution is the simplest: delete the current class before adding a new one .

function quitarFondo(elemento) {
  $(elemento)
    .removeClass('fondo_rojo')
    .addClass('fondo_blanco');
}