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

Question

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?

Yes it is. At least you can set them to an empty value, which removes it. — Felix Kling
– Felix Kling, Commented Feb 22, 2012 at 16:31
Possible duplicate: Remove CSS attribute using Jquery. The answers there may be helpful to you. — Drew Gaynor
– Drew Gaynor, Commented Feb 22, 2012 at 16:40
To remove only one css property at a time: var cssObject = $('selector').prop('style'); cssObject.removeProperty('top'); cssObject.removeProperty('left'); — ilgaar
– ilgaar, Commented Oct 6, 2013 at 20:05
Just for the record, setting to empty does not always work: "Setting the value of a style property to an empty string... It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element." - see stackoverflow.com/questions/27791484/… — Mörre
– Mörre, Commented Jan 6, 2015 at 3:54

Bill · Accepted Answer · 2015-11-30 17:36:01Z

429

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': ''
});

edited Nov 30, 2015 at 17:36

Bill

3,52725 silver badges43 bronze badges

answered Feb 22, 2012 at 16:34

wtrevino

4,8712 gold badges18 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

phirschybar Over a year ago

this is a better answer than the one selected.

Starkers Over a year ago

Yep. This is the rightful answer. Didn't make sense at first, because it looks like ".css('top', '')" simply creates an empty 'top' rule, but no, it removes it completely.

Viktor Over a year ago

This is the best answer yet. But I think I found another one. I tried a few different ones. .css('left', undefined); did not change anything. Passing null didn't do anything either. But .css('left', false); removes that property.

user2415010 Over a year ago

As others have suggested, this should be considered the correct answers.

Jeremy Wadhams Over a year ago

@Viktor Note that the documentation explicitly says to use empty string. I wonder if false happens to work because of some undocumented type coercion that could go away in the future? api.jquery.com/css

|

Rob Hruska · Accepted Answer · 2012-02-22 16:35:33Z

140

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.

answered Feb 22, 2012 at 16:35

Rob Hruska

121k32 gold badges170 silver badges193 bronze badges

6 Comments

dsomnus Over a year ago

usually such overwrites added to style attribute are meant for changing the value off from default css value; setting it to auto doesn't reset them to default value. meaning auto is not really same then not having the value at all. so correct answer would be $('map').css('top', '');

Alex Over a year ago

This answer is wrong, you're not removing attributes but replacing them with something else. Also, removing the whole style tag doesn't make much sense, one might want to keep some attrs and remove others.. wtrevino's answer is the correct one.

Dean Meehan Over a year ago

Its not an essential option so having it there is great! :) For fields like username

Rob Hruska Over a year ago

For the record, @wtrevino's answer should be the accepted one here. This particular solution worked for me under some circumstances, but I would remove this answer if I could. Unfortunately, since it's accepted, it won't let me.

Lars Over a year ago

This is not the correct answer... @wtrevino answer is the most correct. This answer will only work if you want to remove all static styles from the element... in most cases this is not what you want to do.

|

Anish Gupta · Accepted Answer · 2012-02-22 16:34:48Z

38

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', '');

answered Feb 22, 2012 at 16:34

Anish Gupta

2,2262 gold badges23 silver badges37 bronze badges

Comments

avpaderno · Accepted Answer · 2012-02-22 17:32:05Z

30

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

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

See jQuery Documentation on CSS.

edited Feb 22, 2012 at 17:32

avpaderno

30k17 gold badges80 silver badges95 bronze badges

answered Feb 22, 2012 at 16:35

khotyn

9541 gold badge8 silver badges16 bronze badges

1 Comment

Paul Gordon Over a year ago

Not sure why this isn't the accepted answer. The actual accepted answer is hacky because it doesn't actually remove the CSS property from the object, which is the title of the question.

Jacob McKay · Accepted Answer · 2014-08-31 18:51:26Z

6

Go here: jQuery API
Ctrl + F for 'remove'
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!).

answered Aug 31, 2014 at 18:51

Jacob McKay

2,8361 gold badge22 silver badges20 bronze badges

Comments

gnmerritt · Accepted Answer · 2013-06-18 19:03:30Z

5

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', '')

answered Jun 18, 2013 at 19:03

gnmerritt

5861 gold badge6 silver badges14 bronze badges

Comments

romo · Accepted Answer · 2012-02-22 16:32:00Z

2

If you want to remove all of it you can do

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

answered Feb 22, 2012 at 16:32

romo

1,99011 silver badges10 bronze badges

Comments

Abdennour TOUMI · Accepted Answer · 2013-08-30 09:55:11Z

2

$.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();

answered Aug 30, 2013 at 9:55

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Comments

Martin · Accepted Answer · 2017-01-03 16:01:47Z

1

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");

answered Jan 3, 2017 at 16:01

Martin

6,2682 gold badges28 silver badges49 bronze badges

Comments

Abdennour TOUMI · Accepted Answer · 2013-08-30 10:08:58Z

0

$.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');

answered Aug 30, 2013 at 10:08

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Comments

Petre Dan · Accepted Answer · 2013-11-22 10:04:07Z

0

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.

answered Nov 22, 2013 at 10:04

Petre Dan

1

Comments

faboulaws · Accepted Answer · 2015-10-08 10:03:37Z

0

To remove css styles assign an empty string to the style

in this case

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

answered Oct 8, 2015 at 10:03

faboulaws

2,07818 silver badges17 bronze badges

Comments

Said Erraoudy · Accepted Answer · 2015-03-17 15:30:25Z

-1

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

answered Mar 17, 2015 at 15:30

Said Erraoudy

1,6191 gold badge16 silver badges21 bronze badges

1 Comment

Martin Massera Over a year ago

this sets it to 0, does not remove the property

Collectives™ on Stack Overflow

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

13 Answers 13

6 Comments

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

6 Comments

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related