Append <div> with click and remove with click

Question

I have the following problem:

I append the div:

$(".class").click(function() {   
    $(this).append("<div class='click'></div>");
    $("div.click").show();
});

Then i remove it with a click on another button but the div is still there.

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});

Answer 1

Try keeping a pointer to the div the following should work.

var tempDiv;
$(".class").click(function() {   
  tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  tempDiv.remove();
});

---

Otherwise you can use this way

$(".class").click(function() {   
   $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  $('.click').remove();
});

PS: You may also remove the .show() if the .click class is not hidden by default

Answer 2

Try this

You have two buttons.

Say:

<div class="Main">
    <div>Div0</div>
</div>

<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>


and JS Code is :

var counter=1;

$(".button1").click(function() {  

$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});

$(".button2").click(function() {

$('.Main div').remove(':last-child');
});

Answer 3

Here is an example based on your work : http://jsfiddle.net/UQTY2/128/

<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>

$(".class").click(function() {
    $(this).append("<div class='click'></div>");
});

$(".button").click(function(e) {
    e.preventDefault();
    $("div.click").remove();
});

Answer 4

this will remove

$(".button").on("click", function (e) {

    e.preventDefault();
    $("div.click").remove();
});

check my fiddle

http://jsfiddle.net/suhailvs/4VmYP/2/

Answer 5

When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ) .

$(document).on("click", ".button", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});

If you want remove element, you shoud use .remove() method instead of .hide() .

Answer 6

you can dynamically add and remove div with javaScript like this

Check this example

Add and Remove Div dynamically

in this example the default remove button remove the most recent added div or you can say the last div in the container But if you want to remove particular div with div place number you can enter the div number .

Code example

HTML

<div class="Main">
    <div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>

JS

var counter=0;
$("#ok").click(function(){
    $('.Main').append('<div> new div'+counter+'</div>');
    counter++;
})
$("#del").click(function(){
    $('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
    var Val=$('#V').val();
    $('.Main div:nth-child('+Val+')').remove();
})

Answer 7

remove "on" from

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});