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

PS：如果默认情况下未隐藏.show()课程，您也可以删除.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

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

这将删除

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

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

检查我的小提琴

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

Answer 5

动态创建元素时，需要委托事件：.on( event, selector, handler(eventObject) )。

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

如果您想要删除元素，则应使用.remove()方法而不是.hide()。

Answer 6

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

检查此示例

Add and Remove Div dynamically

在此示例中，默认删除按钮删除最近添加的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 7

从

中删除“开启”

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

单击附加<div>并单击</div>删除

7 个答案: