0

I am unable to remove CSS property for a HTML tag.

I am trying to remove position style property from css. Actually it's coming from parent, I am able to override it with my css file but i want to remove postion property completely as per my requirement.

Below code, I tried, But it didn't work for me

$("p").removeProp("position");

Example for my code (Note: I don't have any className for P tag)

$("p").removeProp("position");
p {
  position: static;
  font-size: 18px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Hello Stack Overflow
</p>
ravi polara
  • 564
  • 3
  • 14
Sri
  • 9
  • 2
  • 1
    Try `$("p").css({"position": "initial"});` – Gosi Jan 23 '20 at 02:24
  • `$("p").css("position", "unset");` may also work – EGC Jan 23 '20 at 02:28
  • 1
    Does this answer your question? [How can I remove a style added with .css() function?](https://stackoverflow.com/questions/4036857/how-can-i-remove-a-style-added-with-css-function) – Ray Jan 23 '20 at 02:32
  • any value to the position is is not working for me, In my case i need to remove position property completely. – Sri Jan 23 '20 at 06:33

2 Answers2

1

You can remove them by: 

$("p").css("position",'');

As mentioned in the jquery documentation:

Setting the value of a style property to an empty string — e.g. $(selector).css('color', ' ') — removes that property from an element if it has already been directly applied.

To remove the whole in-line style of an element use:

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

Your actual problem seems that you have added css property on p tag. You should implement either use of class or use!important to replace. The best way is to use class

.p-static {
  position: static;
  font-size: 18px;
  color: red;
}
.p-normal {
  font-size: 18px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="p-static">
  Hello Stack Overflow, this is static paragrap.
</p>
<p class="p-normal">
  Hello Stack Overflow, this is normal paragraph.
</p>
Sushil
  • 1,111
  • 1
  • 10
  • 23
  • Thanks for the quick response Sushil, But this line of code is not working for me. I tried the code in coponentDidMount() life cycle method. It's not at all replacing or removing – Sri Jan 23 '20 at 06:41
  • you shouldn't add `p { position: static; font-size: 18px; color: red; }`. what you have to do is use some class or use inline. – Sushil Jan 23 '20 at 06:51
0

With help of jQuery you can achieve this easily

$("p").css({ 'postion': '' });
Balaji.J.B
  • 618
  • 7
  • 14