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;
});

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;
});

• javascript
• jquery

• Where is "remove" initialised ? does the background change to red ? – Manse Commented Dec 20, 2011 at 12:01
• 2 A couple of ments: cicrle is probably not the spelling you were looking for and you don't declare remove anywhere. Otherwise, what's the question? – lonesomeday Commented Dec 20, 2011 at 12:01
• @lonesomeday probably all it needs ! – Manse Commented Dec 20, 2011 at 12:04
• can you add you html as well? trying to replicate you issue but I do not know what #btn is for example. also cicrle is mispelled! – Claudio Carta Commented Dec 20, 2011 at 12:09

3 Answers 3

Working example : http://jsfiddle/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>

i see three problems (withouth seeing the markup it's difficult to be more precise:

• you didn't set remove so if(remove == true){ is always false
• the created div is appended to the element with id = button and so when you click on the div you also trigger the click event on the parent() (which creates another div
• you are calling toggle on an object with id = btn, shouldn't it be button?

Ok i edited your code, it still makes little sense because it's not clear what you want to do:

<button id='button'>Add</button>
<button id='btn'>Toggle</button>
<div id="result"></div>

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

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

fiddle here for the results http://jsfiddle/B6P76/

you can use

hide()

method from jquery