jQuery : create div dynamically and delete it

Question

I'm annoyed because I realize that the solution is right under my eyes in this forum. Looking for a way to click on a div.A, created a div.B with a random background, for each div.A click. I would like that created div.B be deleted by clicking a second time on this div.A. if possible, I would like that clicking multiple times on the same item, the background of created div are different, but that does not bother me if it remains as it is now. here is where I am: http://jsfiddle.net/ZU2ef/

html :

<div id="area">
</div><!--area-->

<div id="wrap">

    <div id="bouee">

        <div class="content">

            <div class="titre" id="sujet1">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content1-->

        <div class="content">

            <div class="titre" id="sujet2">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content2-->

        <div class="content">

            <div class="titre" id="sujet3">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content3-->

</div><!--bouee-->

</div><!--wrap-->`

css : 

body {
    background-color: #508090;
    text-align:center;
    margin: auto;}
#area{
    border:green;
    width:100%;
    height:100%;
    position:absolute;
    top: 0px;
    left: 0px;
    z-index:1;
}
#wrap{
    background-color: blue;
    margin: 0 auto;
    width:inherit;
    height:auto;
    position:absolute;
    top: 15px;
    left: 15px;
    opacity:0.5;
    z-index:1000;
}
#bouee{
    width: 900px;
    height: auto;
    position:relative;
}
.content {
    background-color: transparent;
    position:relative;
    border:#F00 solid;
    overflow: hidden;
    height: 100px;
    margin-top: 15px;
    width: 100%;
}
.titre {
    background-color: #FFFF00;
    float: left;
    height: 20px;
    cursor:pointer;
    width: 10%;
}
.post {
    background-color: #FFFFFF;
    float: left;
    max-height: 0;
    overflow: hidden;
    margin: 1px;
    position: relative;
    width: 100%;
}
.carre {
    background-color: green;
    height: 200px;
    width: 20px;
}
.vague {
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:-10;
    top : 0;
    left : 0;
}

jquery (1.8.3) :

jQuery(document).ready(function($){

    $(".content").each(function () {
        var
                $content = $(this),
                $title = $content.find(".titre"),
                $post = $content.find(".post");
                var counter = 1;
        var randomColors = ["green","yellow","red","blue","orange","pink","cyan"];
        var len = randomColors.length;
        var randomNum = Math.floor(Math.random()*len);
            //Removes color from array so it can't be used again
            randomColors.splice(randomNum, 1);


            $title.toggle(function() {
                var id = this.id;
                $post.animate({maxHeight:'150px'}, 400);
                $('<div/>').addClass('vague'+id+counter++).css({
                    //'background-color': 'white',
                    'background-color': randomColors[randomNum],
                    'opacity': '1',
                    'position': 'absolute',
                    'width': '100%',
                    'height': '100%',
                    'z-index':'1000',
                    'top' : '0',
                    'left' : '0'
                    }).appendTo('#area');
                }, 
                function () {
                    $post.animate({maxHeight:'0'}, 200);
                }
            );

            $title.click( function () {
                $(this).delay(200).toggleClass('active');
            });
            $('.titre.active').click( function () {
                var $back = $('body').find("#area").find(':first-child');
                $back.animate({opacity:'0'}, 200);
                $back.remove();
            });


        });
    });

I'm stuck at deleting the div created. Be indulgent, I'm just a graphic designer trying to play with magic. This is not an order, I started and all comments, or links to documents containing information, or bits of information are welcome! Thank you very much!

Answer 1

Dynamic content does not exist in the DOM. So stuff inside a 'Document.ready(function(){...});' wont catch it.

Instead try to use a delegated function to find generated content. Here's a general example.

$('.parent-that-generated-content-is-in').on('click', '#id-content',function(){
    $(this).hide(); 
});