javascript - jQuery 通过单击创建和删除 <div>

Question

您好，我尝试编写一个函数，使用户能够在点击网站的某个区域时创建一个，当他再次点击创建的 div 时，它会被删除。不知何故，我只能创建 div，当我单击它们时，会创建一个新的 div，而不是删除单击的 div。我还实现了一个功能，用户可以在其中确定是要创建一个 div 还是删除一个 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

工作示例: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;
});

我做了以下事情:

• 添加了一个变量 - 删除
• 用过on()而不是点击，因为在绑定(bind)点击后将 div 添加到 DOM
• 排序圆的拼写
• 为新创建的 div 创建了一个容器

我的示例 HTML

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