Remove dynamically generated div with jquery
<p>I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
        $("#form1 :checkbox#checkbox1").click(function() {
            var d = document.createElement('div');
            if ($(this).is(":checked")) {
                $(d).addClass("newdiv")
                    .html("This is a new div")
                    .appendTo($("#mydiv"))
                    .hide()
                    .fadeIn(1000);
                }
            else {
                //$(".newdiv").fadeOut(1000);
                $(d).fadeOut(1000);
            }
        });
    });
&lt;/script&gt;
</code></pre>

<p>The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with <code>$(".newdiv").fadeOut(1000);</code> (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.</p>
