jQuery not removing absolute positioned divs?
<p>I have the following code which will hide the parent <code>div</code> of the link you click on. When the <code>div</code>'s are relatively positioned, there is no problem, but when they are absolutely positioned, they won't remove.</p>

<p>The script also saves the state of each element to <code>localStorage</code>, and the error only happens the first time you try to close one of the divs. What I mean by this is that, if you show three divs, say div one, two, and three, and then try to close the top most div, it won't close. If you reload the page, and try to close div three, which is on top from before you reloaded the page, it will close.</p>

<p>There's a little bit too much code to post, <a href="http://jsfiddle.net/charlescarver/jgctY/1/" rel="nofollow">so here's the jsFiddle for it</a>. But here's the code for posterity:</p>

<pre><code>function loadWidgets() {
    $(".base").each(function () {
        var id = $(this).attr("id");
        var counter = localStorage.getItem("counter-" + id) || 0;
        var active = localStorage.getItem(id + "-active") || "";
        $.each(active.split(" "), function (k, v) {
            var s = v.split(",");
            if (s.length != 2) {
                return;
            }
            var newElement = $("#" + s[0]).clone(true, true);
            newElement.attr("id", s[1]).attr("class", "drag " + id).data("id", id).appendTo("body");
        });
    });
}

function closeWidget() {
    var id = $(this).parent().attr("id").match(/[a-zA-Z]+/g);
    $(this).parent().remove();
    var active = [];
    $($("." + id).not(".base")).each(function () {
        active.push(id + "," + $(this).attr("id"));
    });
    active = active.join(" ");
    localStorage.setItem(id + "-active", active);
}

function cloneWidget() {
    var id = $(this).attr("href").match(/[a-zA-Z]+/g);
    var key = "counter-" + id;
    var counter = localStorage.getItem(key) || 0;
    counter++;
    var newElement = $("#" + id).clone(true, true);
    newElement.attr("id", id + counter).attr("class", "drag " + id).appendTo("body");
    var active = [];
    $($("." + id).not(".base")).each(function () {
        active.push(id + ',' + $(this).attr("id"));
    });
    active = active.join(" ");
    localStorage.setItem(id + "-active", active);
    localStorage.setItem(key, counter);
}
loadWidgets();
$(".nav a").click(cloneWidget);
$(".close").click(closeWidget);​
</code></pre>

<p>And the HTML:</p>

<pre><code>&lt;div class="base" id="one" style="background-color:blue"&gt;
    &lt;a class="close" href="#"&gt;Close&lt;/a&gt;
    &lt;input class="input" id="test"/&gt;
    &lt;textarea class="textarea" id="test2"&gt;&lt;/textarea&gt;

&lt;/div&gt;
&lt;div class="base" id="two" style="background-color:red"&gt;
    &lt;a class="close" href="#"&gt;Close&lt;/a&gt;
&lt;/div&gt;
&lt;div class="base" id="three" style="background-color:green"&gt;
    &lt;a class="close" href="#"&gt;Close&lt;/a&gt;
&lt;/div&gt;
&lt;div class="nav"&gt;
    &lt;a href="#one"&gt;One&lt;/a&gt;
    &lt;a href="#two"&gt;Two&lt;/a&gt;
    &lt;a href="#three"&gt;three&lt;/a&gt;
&lt;/div&gt;​
</code></pre>
