Remove the style attribute of all descendants to jquery

advertisements

I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.

The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.

The original HTML of the top nav looks a bit like like:

<nav id="mainNavigation" style="white-space: normal; display: block;">
    <div class="index">
        <a href="/participate/">Participate</a>
    </div>

    <div class="index" style="margin-right: 80px;">
        <a href="/news/">News</a>
    </div>

    <div class="index active" style="margin-left: 80px;">
        <a class="active" href="/about/">About</a>
    </div>

    <div class="external">
        <a href="/collection/">Collection</a>
    </div>

    <div class="index">
        <a href="/contact/">Contact</a>
    </div>
</nav>

I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):

var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
    <div id="ScrollNavWrapper">
        <div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
            <nav id="newScrolledNav" style="white-space: normal; display: block;">
                <div class="index home">
                    <a href="/">Home</a>
                </div>
                ' + originalNavItems + '
                <div class="newItem">
                    <a href="http://www.externalsite.com">
                        View on External Site
                    </a>
                </div>
            </nav>
        </div>
    </div>');

I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?


You can strip the style elements like so:

var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');