Search code examples
javascriptjqueryhtmlcssinline

Remove inline css of an HTML elements

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

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

    element.removeAttribute("style")