删除使用jQuery附加div的附加（）

Question

您好我有一个按钮，它的div添加到我的html使用jquery append（）。现在每个附加div都有一个关闭按钮，它使用jquery remove（）去除附加的div。代码如下所示：

$(document).ready(function(){ 
    $("#image-btn").click(function(){ 
    var $imageElement = $("<div class='image_element' id='image-element'><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' id='close-img-btn' width='22px'><button type='button' class='img_btn' id='img-btn'>Upload Image</button></div></div>"); 
    $("#element-holder").append($imageElement); 
    $imageElement.fadeIn(1000); 

    $("#close-img-btn").click(function(){ 
    $imageElement.remove(); 
    }); 
    }); 
}); 

现在问题出现在删除附加的div时出现。当我添加多个div（每个都有一个关闭按钮），并点击最后附加div的关闭按钮时，什么都不会发生。但点击第一个附加div的关闭按钮将关闭所有其他附加div。

我想关闭只打我靠近，而不是其他人。我该怎么做呢 ？如果有人能指导我完成，我会很感激。谢谢。

Answer 1

元素的ID必须是唯一的，当您使用ID选择器时，它将仅返回具有ID的第一个元素，因此所有的点击处理程序都会添加到第一个按钮。

使用类和事件委托

$(document).ready(function() { 
    $("#image-btn").click(function() { 
     var $imageElement = $("<div class='image_element' ><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' width='22px'><button type='button' class='img_btn' >Upload Image</button></div></div>"); 
     $("#element-holder").append($imageElement); 
     $imageElement.fadeIn(1000); 
    }); 

    $("#element-holder").on('click', '.closebtn', function(){ 
     $(this).closest('.image_element').remove(); 
    }) 
}); 

演示：Fiddle

更多阅读：

• Event binding on dynamically created elements?

Answer 2

使用$（本），而不是$ imageElement

$(document).ready(function(){ 
     $("#image-btn").click(function(){ 
     var $imageElement = $("<div class='image_element' id='image-element'><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' id='close-img-btn' width='22px'><button type='button' class='img_btn' id='img-btn'>Upload Image</button></div></div>"); 
     $("#element-holder").append($imageElement); 
     $imageElement.fadeIn(1000); 

     $("#close-img-btn").click(function(){ 
     $(this).remove(); 
     }); 
     }); 
    }); 

Answer 3

你需要删除你按下按钮附近的父母/孩子。

例如：

$("#close-img-btn").click(function(){ 
    $(this).parent('content-div').remove(); 
});