I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.

I have three sections: the 'table of contents', the content, and the javascript (jQuery) code

Table of Contents

<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>

Contents

<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
    <a name="green"></a>
    <div>Green Purchasing refers to the procurement of products and service...<a href="#topOfPageAnchor" class="topOfPageAnchorClass">Back to Top</a></div>
</li>
<li id="slideNumber1" class="slideShowSlide">
    <a name="before"></a>
    <div>We easily accomplish the first four bullet points under...<a href="#topOfPageAnchor" class="topOfPageAnchorClass">Back to Top</a></div>
</li>
</ul>

jQuery On Page Load

$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});

jQuery to re-enable links

$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});