Remove inline css of an HTML elements

If you want remove all inline styles, Pranay's answer is correct:

$("#elementid").removeAttr("style")

If you want to remove just one style property, say z-index, then you set it to an empty value:

$("#elementid").css("zIndex","")

From the jQuery documentation (http://api.jquery.com/css/):

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.


Use the removeAttribute method, if you want to delete all the inline style you added manually with javascript.

element.removeAttribute("style")

Reset z-index to initial value

You could simply reset the z-index to it's initial value causing it to behave just like the li would without the style declaration:

$(function(){
    $('#menu3').css('z-index', 'auto');
});

You can go vanilla and use plain javascript (code should run after your menu html has loaded):

// If you're going for just one item
document.querySelector('#menu3').style.zIndex = 'auto';

Remove style attr

You could use jQuery to remove the style attributes from all your list:

Note: Keep in mind this will remove all styles that have been set to your element using the style attribute.

$(function(){
    $('#menu3').removeAttr('style');
});

Or vanilla:

// Vanilla
document.querySelector('#menu3').style = '';