javascript - 附加单击并删除单击

Question

我有以下问题：

我附加了div：

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

然后我通过单击另一个按钮将其删除，但 div 仍然存在。

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

Answer 1

尝试保持指向 div 的指针，以下应该可以工作。

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

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

---

否则你可以使用这种方式

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

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

.show()PS：如果.click类默认不隐藏，你也可以去掉

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

这将删除

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

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

检查我的小提琴

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

Answer 4

动态创建元素时，需要 delegated-event: .on( event, selector, handler(eventObject) )。

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

如果你想删除元素，你应该使用.remove()method 而不是.hide().

Answer 5

您可以像这样使用 javaScript 动态添加和删除 div

检查这个例子

动态添加和删除 Div

在这个例子中，默认的删除按钮删除最近添加的 div 或者你可以说容器中的最后一个 div 但是如果你想删除带有 div 位置编号的特定 div 你可以输入 div 编号。

代码示例

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 6

这是基于您的工作的示例：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 7

从

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