Javascript 单击按钮关闭动态创建的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>');
});

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

我找不到合适的div来请求关闭。我不熟悉DOM和JQuery。不能把事情联系起来

---

首先，如果您使用多个div，则不应该给close按钮一个ID，而应该给它一个类（比如，

.close

）

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

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

delegator处理任何

.ara dynamic div.close

按钮中的所有单击事件，捕获它们并允许您使用

$（this）.closest（…）

访问父容器

---

编辑：更正了一个错误

首先，如果您使用多个div，那么不应该给关闭按钮一个ID，而应该给它一个类（比如，

.close

）

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

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

delegator处理任何

.ara dynamic div.close

按钮中的所有单击事件，捕获它们并允许您使用

$（this）.closest（…）

访问父容器

---

编辑：更正了错误

您可以使用jQuery的

.closest（）

函数

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

---

您可以使用jQuery的

.closest（）

函数

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

替换此：

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

代码所做的是删除除单击按钮之外的所有其他

.ara dynamic div

。

替换此：

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

---

代码所做的是删除所有其他

.ara dynamic div

，除了单击按钮的那一个。

不再查看，ID是唯一的-每次创建新的div时，您的代码都会添加相同的div和按钮ID-因此，如果您以div ID为目标，则删除一个会将它们全部删除-当

$（文档）时也会触发相同的按钮ID。on（'click'，'#remove'，函数（）{

fires@DarrenSweeney嘿，但如何克服这一点。当用户动态创建10个div时。那么我将如何区分它们中的每一个，然后才能关闭它。请查看

最近的（）

或

父级（）

（如果总是相同的结构）在jquery中，您给按钮和外部div一个类，而不是ID，然后当单击该按钮类时，您将使用新div类查找最近的div，并使用相同的div ID删除它，这是不可能的。使类相同，但保持ID不同。使用每个新创建的div创建动态删除按钮，并使用onclick函数removeElement（“myDiv2”）此按钮适用于myDiv2。它随每个div而更改，因为所有div都有uniqie ID。不再进一步查看，ID是唯一的-每次创建新div时，您的代码都会添加相同的div和按钮ID-因此，如果您以div ID为目标，则删除一个将删除所有div ID-当

$（文档）时也会触发相同的按钮ID。打开（“单击”、“删除”函数（）{

fires@DarrenSweeney嘿，但如何克服这一点。当用户动态创建10个div时。那么我将如何区分它们中的每一个，然后才能关闭它。请查看

最近的（）

或

父级（）

（如果总是相同的结构）在jquery中，您给按钮和外部div一个类，而不是ID，然后当单击该按钮类时，您将使用新div类查找最近的div，并使用相同的div ID删除它，这是不可能的。使类相同，但保持ID不同。使用每个新创建的div创建动态删除按钮，并使用onclick函数removeElement（“myDiv2”）此按钮适用于myDiv2。它随每个div而变化，因为所有div都有uniqie ID。这将只淡出按钮-使用类似于以下内容的内容：

$（this）。最接近（'.ara dynamic div'）.hide（）；

@DarrenSweeney是的，我刚刚意识到发布后不久，不知道我在想什么；）编辑它。这只会使按钮淡出-使用类似这样的东西

$（this）.最近（'.ara dynamic div'）.hide（）；

@DarrenSweeney是的，我刚刚意识到发布后不久，不知道我在想什么；）编辑它。永远不要使用警报进行调试永远不要使用警报进行调试