Question

Hi I try to wirte a function, which enables the user to create a when he clicks on a certain area of the site, and when he clicks on that created div again, it gets deleted. Somehow I can only create divs and when I click them, a new one is created instead removing of the clicked one. I also implemented a function in which the user can determain if he wants to create a div or delete a div.

<!--changed #button to #conten-->
<div id='content'></div>
<button id='btn'></button>



var i = 0;
var remove = false;
$('#content').click(function(e) {
    $('<div></div>').attr({
        'id' : i
    }).addClass('circle').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('#button');
    i++;
});

$('.circle').click(function (){
    if(remove == true){
        $(this).remove();
    }
    else{
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});
$('#btn').toggle(function() {
    $('#btn').text('add');
    remove = true;
}, function() {
    $('#btn').text('remove');
    remove = false;
});

Answer 1

Working example : http://jsfiddle.net/CutPp/

var i = 0;
var remove = true; // added this 
$('#button').click(function(e) {
    $('<div/>').attr({
        'id' : i
    }).addClass('circle').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('#area'); // append to new container
    i++;
});

$('#area').on('click','.circle',function (){ // corrected spelling and changed to on()
    if(remove){  // no need to check for == true
        $(this).remove();
    } else {
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});

$('#btn').toggle(function() {
    $('#btn').val('add');
    remove = true;
}, function() {
    $('#btn').val('remove');
    remove = false;
});

I did the following :

• added a variable – remove
• used on() instead of click as the divs are added to the DOM after the click was bound
• sorted the spelling of circle
• created a container for the newly created divs

My example HTML

<input type="button" id="button" value="New Div"/>&nbsp;<input type="button" id="btn" value="Add"/><br/>
<span id="area"></span>