JQuery добавить класс и удалить класс не работает

Question

Я пытаюсь сделать .с кнопку когда нажмите на кнопку .S будет добавить новый элемент в тег и удалить .S класс и добавить новый класс .h когда щелкнули. ч класс, < [стиль]> элемент удалить из моего тела

Я хочу, когда нажмите .с добавить < [стиль]> элемент и когда нажмите на .h удалить < [стиль] элемент>

добавить класс " h "работает хорошо! но если щелкнуть .h < [style]> элемент не удалять !!

Мой код:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 

     var style = '<style class="kha">body{background:#000;}</style>' 

     jQuery(".s").click(function() { 
      jQuery("body").append(style); 
      jQuery(".s").addClass("h").removeClass("s"); 
     }); 

     jQuery(".h").click(function() { 
      jQuery(".kha").remove(); 
     }); 

    }); 
</script> 

HTML:

<span class="s">Black Color</span> 

Answer 1

Вы можете использовать .toggleClass():

var style = '<style class="kha">body{background:#000;}</style>'; 
 
jQuery(".s").click(function() { 
 
    jQuery("body").append(style); // append the style 
 
    if($(this).hasClass('h')){$('.kha').remove();} // check if class h is added 
 
    jQuery(this).toggleClass("s h"); // toggle the class to .s .h 
 
});

.s { 
 
    color: green; 
 
} 
 
.h { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='s'>s with h toggle.</div>

Answer 2

FIDDLE

$("#addClass").click(function() { 

    $('#para1').addClass('highlight'); 

}); 

$("#removeClass").click(function() { 

    $('#para1').removeClass('highlight'); 

});