Remove inline css of an HTML elements

Question

I'm using wordpress 3.5 and create menu with submenus. It's structured like this:

<ul class="menu">
    <li id="menu1">Menu 1</li>
    <li id="menu2">Menu 2</li>
    <li id="menu3" style="z-index:100;">
        Menu 3
        <ul class="submenu">
            <li id="submenu1">submenu1</li>
            <li id="submenu2">submenu2</li>
            <li id="submenu3">submenu3</li>
        </ul>
    </li>
</ul>

The problem is the menu with submenus, it's automatically attached a z-index with value 100. I don't want it to be like that because it gives me trouble on adding lavalamp effect to those menus.

I tried to edit the z-index by using jquery just after the menu is created using wp_nav_menus simply like this:

jQuery(document).ready(function(){
     jQuery("#menu3").css("z-index", "0");
});

But unfortunately, it doesn't work. How can I remove that inline css style?

Solution 1

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

element.removeAttribute("style")

Solution 2

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 = '';

Solution 3

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.

Comments

[Glen Selle]

Much cleaner syntax and simpler syntax. I like this solution the best.

[DA.]

You don't need to use regex for this. Simply set the value of the property you want to remove to blank ""

[Shahor]

The problem with this solution is that it removes all the CSS you set but also things you didn't. In the event where there are already styles defined you're going to remove everything. =/