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

我做了以下事情：

添加了一个变量 - remove
使用on()而不是点击，因为在绑定点击后将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>

Answer 2

我看到三个问题（没有看到标记，很难更精确：

您没有设置删除，因此if(remove == true){始终为false
创建的div附加到id = button的元素，因此当您单击div时，您还会触发parent（）上的click事件（这将创建另一个div
您正在调用ID = btn的对象，但不应该是button吗？

好的，我编辑了你的代码，它仍然没有多大意义，因为它不清楚你想做什么：

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

在此处为结果http://jsfiddle.net/B6P76/

添加小提琴

Answer 3

你可以使用

hide（）

来自jquery的

方法

jQuery通过单击</div>创建并删除<div>

3 个答案: