Question

我从 SO 发了很多帖子，但无法与我的情景相关。

我点击按钮时会显示此代码。用户可以在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>');
});

从该div获取buttonclick事件的代码

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


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

现在的问题是我必须创建多个动态div。每个div都有按钮关闭自己。当我调用此函数时，它将关闭所有创建的div而不是单击该按钮的div。

我无法找到接近请求的正确div。我是DOM和JQuery的新手。无法将事情联系起来

Answer 1

首先，如果你使用多个div，你不应该给关闭按钮一个ID，而是给一个类（让我们说.close）

接下来，您可以使用事件委派来查找正确的元素：

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

委托人处理任何.ara-dynamic-div .close按钮中的所有点击事件，捕获所有点击事件并允许您使用$(this).closest(...)到达父容器。

编辑：更正了错误

Answer 2

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

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

JSFiddle

Answer 3

替换它：

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

由此：

$(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。

关闭动态创建的Div on按钮单击

3 个答案: