Remove CSS "top" and "left" attributes with jQuery

Im building a draggable map that when the map is dragged the element is given a 'left' and 'top' attribute with values for each as so...

<div class="map" style="top:200px; left:100px;">Map</div>

I have a button that I want to remove the top and left attribute from the inline style on the div when clicked, Is this possible with jquery?

If you want to specifically remove top and left attributes and leave others, you can do this:

$('.map').css('top', '').css('left', '');

Or, a shorter equivalent:

$('.map').css({
    'top': '',
    'left': ''
});

The default values for CSS top and left are auto, so setting them to that might be equivalent depending on what you're trying to do:

$('.map').css('top', 'auto').css('left', 'auto');

You also have the option of wholly removing the style attribute:

$('.map').removeAttr('style');

However, if you're using other jQuery UI components, those may require inline styles that you don't want to be removed, so proceed with caution there.

You can remove all of the contents in the style attribute by doing:

$('.map').removeAttr('style');

And you can remove specific styles by doing:

$('.map').css('top', '');
$('.map').css('left', '');

Simply set the CSS property with an empty string, for example with the following code:

$('#mydiv').css('color', '');

See jQuery Documentation on CSS.

1. Go here: http://api.jquery.com/css/" title="RTFM">jQuery API
2. Ctrl + F for 'remove'
3. Read:

> Setting the value of a style property to an empty string — e.g. $( > "#mydiv" ).css( "color", "" ) — removes that property from an element > if it has already been directly applied, whether in the HTML style > attribute, through jQuery's .css() method, or through direct DOM > manipulation of the style property.

The docs give you the current, recommended approach for what you're trying to accomplish, which can often save you time because you don't have to read back and forth flame wars on stack overflow (no matter how fun/enlightening that may be!).

Per this JQuery bug report

element.removeAttr('style')

doesn't work consistently in Webkit based browsers. For example, I ran across this problem on iOS 6.1. The fix is to use:

element.attr('style', '')

If you want to remove all of it you can do

$('.map').removeAttr('style');

$.fn.removeCss=function(prop){
   if(!prop){
          return $(this).removeAttr('style').removeAttr('class');
     }
    else{
         return $(this).css(prop,null);
    }
      
}

then if you want to remove css prop(s) :

    $('#mydiv').removeCss('color');
//To remove all prop Css
    $('#mydiv').removeCss();

In my opinion the cleanest way is to remove the property completely from the element's CSSStyleDeclaration, instead of just overwriting it with some kind of null/zero/default value:

$(".foo").prop("style").removeProperty("top");
$(".foo").prop("style").removeProperty("left");
$(".foo").prop("style").removeProperty("background-color");

$.fn.removeCss=function(toDelete){

    var props=$(this).attr('style').split(';');
var tmp=-1;
for( var p=0;p<props.length; p++){if(props[p].indexOf(toDelete)!==-1){tmp=p}};
if(tmp!==-1){

   delete props[tmp];
}

  return $(this).attr('style',props.join(';')+';');

}

Delete safely with this plugin!

$('myDiv').removeCss('color');

There are some styles that can't be easily remove.(overflow comes to mind)

A workaround would be to create 2 different classes and add/remove the one containing the style you want.

NOT the best solution for style properties that can be easily remove/disabled.

To remove css styles assign an empty string to the style

in this case

$('.map').css({top:'',left:''});

 $("#map").css("top", "0"); 
 $("#map").css("left", "0");