关闭动态创建Div按钮点击

我经历了很多帖子从SO，但无法与我的情况。关闭动态创建Div按钮点击

我有这个代码按钮点击。用户可以通过它在UI上创建尽可能多的div。

$('#adddiv').click(function() { 
    debugger; 
    $('#main').append('<div class="ara-dynamic-div"><div class="box box-solid bg-light-blue-gradient"><div class="box-header"><!-- tools box --><div class="box-tools"><div class="btn-group"><button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-server"></i></button>         <ul class="dropdown-menu pull-right" role="menu">          <li><a href="#">Add new event</a></li>          <li><a href="#">Clear events</a></li>          <li class="divider"></li>          <li><a href="#">View calendar</a></li>         </ul>        </div>        <button class="btn btn-primary btn-sm" data-toggle="tooltip" title="Overlay"><i class="fa fa-chain"></i></button>        <button class="btn btn-primary btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>        <button id="remove" class="btn btn-primary btn-sm pull-right" data-widget="remove"><i class="fa fa-times"></i></button></div><i class="fa fa-map-marker"></i><h3 class="box-title"></h3></div><div class="box-body"></div><!-- /.box-body--></div></div>'); 
});

代码获取ButtonClick事件从该div

$(document).on('click', '#remove', function() { 
    showMakeAndHold(this); 
}); 


function showMakeAndHold(obj) { 
    alert(obj); 
    $('.ara-dynamic-div').fadeOut(); 
}

现在的问题是，我要创建多个动态格。每个div都会有按钮关闭自己。当我调用这个函数时，它会关闭所有创建的div，而不是单击哪个按钮。

我无法找到接近请求的正确div。我是DOM和JQuery的新手。不能够涉及的事情

来源

2015-08-03 Ameya Deshpande

无需再进一步查看，ID是唯一的 - 每次创建新的DIV时，您的代码都会添加相同的div和按钮ID - 因此，如果您的div ID为目标，则删除一个将删除所有ID - 同样的按钮ID会触发当$（document）.on（'click'，'#remove'，function（）{'引发 –

@DarrenSweeney嘿，但如何克服这一点。当用户动态创建10个div。那么我将如何区分每个他们然后能够关闭它 –

在jquery中查看'nearest（）'或'parent（）'（如果总是相同的结构） - 你给按钮和外部div一个CLASS，而不是ID，那么当那个按钮类被点击你寻找与新的div类最接近的div并将其删除 –

首先，如果你使用多个div你不应该放弃的关闭按钮的ID，而是一个类，而不是（比方说，.close）

接下来，您可以使用事件代表团找出正确的元素：

$(document).on('click', '.ara-dynamic-div .close', function(event) { 
    $(this).closest('.ara-dynamic-div').fadeOut(); 
})

被代理方在处理任何.ara-dynamic-div .close按钮，所有点击事件，抓住所有这些，让您使用$(this).closest(...)吨到达父容器。

编辑：修正了一个错误

来源

2015-08-03 11:11:33 Katai

这会褪色只有按钮了 - 使用这样的'$（本）.closest（“ARA-动态专区”），隐藏（）;' –

@DarrenSweeney是的，我刚刚意识到张贴片刻后，唐不知道我在想什么;）编辑它。 – Katai

@凯泰感谢它的工作 –

您可以使用jQuery的.closest()功能。本

$(document).on('click', '#remove', function() { 
    showMakeAndHold(this); 
});

：

function showMakeAndHold(obj) { 
    alert(obj); 
    $(obj).closest('.ara-dynamic-div').fadeOut(); 
}

JSFiddle

来源

2015-08-03 11:11:43 JBux

从不使用警报进行调试 –

替换此

$(document).on('click', '#remove', function() { 
    $(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function() { 
     $(this).remove(); 
    }); 
});

Here is the JSFiddle demo

什么代码所做的是它重新移除所有其他.ara-dynamic-div，但按钮被点击的那个除外。

来源

2015-08-03 11:25:52

关闭动态创建Div按钮点击

回答

相关问题