Удалить псевдокласс

[rodiony4]

Здравствуйте
Как удалить псевдоклассы hover и active используя jQuery
Так не получается:

$("#submit_bt").removeClass('buttonRED:hover buttonRED:active');

.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
}
.buttonRED:hover {
  background-color: #ee5f5b;
}
 
.buttonRED:active {
  background: #ff6;
}

[рони]

rodiony4,
рыть в сторону https://developer.mozilla.org/en-US/...eet/deleteRule

[Dilettante_Pro]

<style>
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:hover {
  background-color: #ee5f5b;
}
 
.buttonRED:active {
  background: #ff6;
}
</style>
<div class='buttonRED'>Красная кнопка</div>
<button id = 'clear'>Удалить стили</button>
<script>
clear.onclick = function () {
   var style = document.querySelector('style');
         styleArr = style.textContent.split('}');
   for(var i = 0; i<styleArr.length;i++) {
       if(styleArr[i].indexOf('buttonRED:hover') > 0 || styleArr[i].indexOf('buttonRED:active') > 0) { 
           styleArr.splice(i,1);
           i--;
      }
   }
   style.textContent = styleArr.join('}');
}
</script>

[rodiony4]

рони, Dilettante_Pro, спасибо!

[Malleys]

Dilettante_Pro, ваш скрипт работает правильно только для этого конкретного случая... попробуйте

@media all {
  .buttonRED:hover, .test {
    background-color: #ee5f5b;
  }

  .buttonRED {
    background-color: #B61E29;
    border: 1px solid #000;
    width:100px;
  }
  
  .buttonRED:active {
    background: #ff6;
  }
}

UPD

<style>
.buttonRED {
	background-color: #B61E29;
	border: 1px solid #000;
	width:100px;
}
.buttonRED:hover {
	background-color: #ee5f5b;
}
 
.buttonRED:active {
	background: #ff6;
}

@media all {
	.buttonRED:hover, .test {
		background-color: #ee5f5b;
	}

	.buttonRED {
		background-color: #B61E29;
		border: 1px solid #000;
		width:100px;
	}

	.buttonRED:active {
		background: #ff6;
	}
}

</style>
<div class="buttonRED">Красная кнопка</div>
<button id="clear">Удалить стили</button>
<script>

clear.onclick = function () {
	for(const styleSheet of document.styleSheets) {
		process(styleSheet.cssRules)
	}

	function process(cssRules) {
		for(const rule of cssRules) {
			if(rule instanceof CSSStyleRule) {
				rule.selectorText = rule.selectorText.replace(/\.buttonRED:(hover|active)/g, "#a:not(#b)");
			}

			if(rule instanceof CSSMediaRule) {
				process(rule.cssRules)
			}
		}
	}
}

</script>

Замена на a:not(b) является способом не поломать составной селектор!
Замена на #a:not(#b) является способом не поломать составной и сложный селекторы!

[Dilettante_Pro]

Malleys,
Вырубание топором

<style>
@media all {
  .buttonRED:hover, .test {
    background-color: #ee5f5b;
  }

  .buttonRED {
    background-color: #B61E29;
    border: 1px solid #000;
    width:100px;
  }
  
  .buttonRED:active {
    background: #ff6;
  }
}
</style>
<div class='test'>Test</div>
<div class='buttonRED'>Красная кнопка</div>
<button id = 'clear'>Удалить стили</button>
<script>
clear.onclick = function () {
   var style = document.querySelector('style');
    style.textContent = style.textContent.replace('buttonRED:hover','empty');
    style.textContent = style.textContent.replace('buttonRED:active','empty');
 
}
</script>

[Malleys]

Malleys,
Вырубание топором

Ломает даже простой селектор!

Замена на #a:not(#b) является способом не поломать составной и сложный селекторы! Или ещё что-то ломает?

А как насчёт .top-buttonRED:hover, которое станет .top-empty?

UPD Ваш способ теряет исходный код!
UPD 2 Ваш способ ломает аргументы CSS-функции, вам нужно написать парсер, чтобы найти именно селектор! Или используйте CSSOM API! (пост №5)