Como posso remover um estilo adicionado com a função .css ()?

Estou mudando CSS com jQuery e desejo remover o estilo que estou adicionando com base no valor de entrada:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Como posso fazer isso?
Observe que a linha acima é executada sempre que uma cor é selecionada usando um seletor de cores (ou seja, quando o mouse se move sobre uma roda de cores).

2ª nota: não posso fazer isso css("background-color", "none")porque removerá o estilo padrão dos arquivos CSS .
Eu só quero remover o background-colorestilo embutido adicionado pelo jQuery .

Alterar a propriedade para uma sequência vazia parece fazer o trabalho:

$.css("background-color", "");

A resposta aceita funciona, mas deixa um styleatributo vazio no DOM nos meus testes. Não é grande coisa, mas isso remove tudo:

removeAttr( 'style' );

Isso pressupõe que você deseja remover todo o estilo dinâmico e retornar ao estilo da folha de estilo.

Existem várias maneiras de remover uma propriedade CSS usando o jQuery:

1. Configurando a propriedade CSS para seu valor padrão (inicial)

.css("background-color", "transparent")

Veja o valor inicial da propriedade CSS em MDN . Aqui o valor padrão é transparent. Você também pode usar inheritpara várias propriedades CSS para herdar o atributo de seu pai. No CSS3 / CSS4, você também pode usar initial, revertou unsetessas palavras-chave podem ter suporte limitado ao navegador.

2. Removendo a propriedade CSS

Uma string vazia remove a propriedade CSS, ou seja,

.css("background-color","")

Mas tenha cuidado, conforme especificado na documentação do jQuery .css () , isso remove a propriedade, mas há problemas de compatibilidade com o IE8 para determinadas propriedades abreviadas de CSS, incluindo plano de fundo .

Definir o valor de uma propriedade de estilo como uma sequência vazia - por exemplo, $ ('# mydiv'). Css ('color', '') - remove essa propriedade de um elemento se já tiver sido aplicada diretamente, seja no estilo HTML atributo, pelo método .css () do jQuery ou pela manipulação direta do DOM da propriedade style. No entanto, ele não remove um estilo que foi aplicado com uma regra CSS em uma folha de estilo ou elemento. Aviso: uma exceção notável é que, para o IE 8 e abaixo, a remoção de uma propriedade abreviada, como borda ou plano de fundo, removerá completamente esse estilo do elemento, independentemente do que estiver definido em uma folha de estilo ou elemento .

3. Removendo todo o estilo do elemento

.removeAttr("style")

Peguei o caminho para remover um atributo de estilo com JavaScript puro, apenas para que você saiba o caminho do JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

Isso removerá a tag completa:

  $("body").removeAttr("style");

qualquer uma dessas funções jQuery deve funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Apenas usando:

$('.tag-class').removeAttr('style');

ou

$('#tag-id').removeAttr('style');

Que tal algo como:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Use meu plug-in:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Para o seu caso, use-o da seguinte forma:

$(<mySelector>).removeCss();

ou

$(<mySelector>).removeCss(false);

se você deseja remover também o CSS definido em suas classes:

$(<mySelector>).removeCss(true);

Tente o seguinte:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

obrigado

Se você usa o estilo CSS, pode usar:

$("#element").css("background-color","none"); 

e substitua por:

$("#element").css("background-color", color);

Se você não usar o estilo CSS e tiver um atributo no elemento HTML, poderá usar:

$("#element").attr("style.background-color",color);

2018

existe uma API nativa para isso

element.style.removeProperty(propery)

Este também funciona !!

$elem.attr('style','');

Por que não criar o estilo que você deseja remover uma classe CSS? Agora você pode usar: .removeClass(). Isso também abre a possibilidade de usar:.toggleClass()

(remova a classe, se estiver presente, e adicione-a, se não estiver.)

Adicionar / remover uma classe também é menos confuso para alterar / solucionar problemas ao lidar com problemas de layout (em vez de tentar descobrir por que um estilo específico desapareceu.)

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Isso é mais complexo do que algumas outras soluções, mas pode oferecer mais flexibilidade nos cenários:

1) Faça uma definição de classe para isolar (encapsular) o estilo que você deseja aplicar / remover seletivamente. Pode estar vazio (e, neste caso, provavelmente deveria estar):

.myColor {}

2) usar esse código, baseado em http://jsfiddle.net/kdp5V/167/ de esta resposta por gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Exemplo de uso: http://jsfiddle.net/qvkwhtow/

Ressalvas:

• Não extensivamente testado.
• Não é possível incluir diretivas importantes ou outras no novo valor. Quaisquer diretivas existentes serão perdidas com essa manipulação.
• Altera apenas a ocorrência encontrada pela primeira vez de um styleSelector. Não adiciona ou remove estilos inteiros, mas isso pode ser feito com algo mais elaborado.
• Quaisquer valores inválidos / inutilizáveis ​​serão ignorados ou gerarão erros.
• No Chrome (pelo menos), as regras CSS não locais (como no site) não são expostas pelo objeto document.styleSheets, portanto, isso não funcionará nelas. Seria necessário adicionar substituições locais e manipular isso, tendo em mente o comportamento "encontrado primeiro" desse código.
• document.styleSheets não é particularmente amigável à manipulação em geral, não espere que isso funcione para uso agressivo.

Isolar o estilo dessa maneira é a essência do CSS, mesmo que manipulá-lo. Manipular regras CSS NÃO é do que se trata o jQuery, o jQuery manipula elementos DOM e usa seletores CSS para fazer isso.

Simples é barato no desenvolvimento web. Eu recomendo usar uma string vazia ao remover um estilo específico

$(element).style.attr = '  ';

Tente isto

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');