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

jQuery create and remove <div> by click

提问by Maximilian Lindsey

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.

嗨，我尝试编写一个函数，该函数使用户能够在单击站点的某个区域时创建一个，当他再次单击该创建的 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;
});

采纳答案by Manse

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

工作示例：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

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

My example HTML

我的示例 HTML

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

回答by Nicola Peluchetti

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 = buttonand 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?

• 你没有设置删除所以if(remove == true){总是假的
• 创建的 div 附加到带有 id = 的元素，button因此当您单击 div 时，您还会触发 parent() 上的单击事件（这会创建另一个 div
• 您正在使用 id = 调用切换对象btn，不应该是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.net/B6P76/

在这里小提琴的结果http://jsfiddle.net/B6P76/

回答by abhishek ameta

you can use

您可以使用

hide()

隐藏（）

method from jquery

来自 jquery 的方法