how to remove CSS property from a HTML tag

Question

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>

Answer 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 — eg $(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>

Answer 2

在 jQuery 的帮助下，您可以轻松实现这一目标

$("p").css({ 'postion': '' });