附加 <div> 單擊並單擊刪除

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

檢查這個例子

動態添加和刪除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 7

從中刪除“ on”

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