jQuery removeProp is not working

Question

I try to remove all style properties. When I add the style via .css({cursor:"not-allowed"}) the element would look like this:

<div id="id" style="cursor:not-allowed;">
  My Text
</div>

I know I could set .css({"cursor"=""}) but I don't want to set every single style attribute to "". I don't get why .removeProp("style") is not working. Isn't it supposed to do exactly that?

function applyStyle() {
  $("#id").css({ cursor: "not-allowed" });
}

function removeStyle() {
  $("#id").removeProp("style");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
  My Text
</div>
<button onclick="applyStyle()">Apply style</button>
<button onclick="removeStyle()">Remove style</button>

Answer 1

Use removeAttr, as style is an attribute

function applyStyle() {
  $("#id").css({ cursor: "not-allowed" });
}

function removeStyle() {
  $("#id").removeAttr("style");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
  My Text
</div>
<button onclick="applyStyle()">Apply style</button>
<button onclick="removeStyle()">Remove style</button>