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?

Answer 1

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

element.removeAttribute("style")

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