Question

我试图在ajax的成功动作完成后删除某个div。一些代码：

这里我尝试从DOM中删除它：

$('.close-modal').on('click', function () {

    console.log("modal closed");
    $( "#animation" ).remove();

});

所有这些代码都在$(document).ready{......}函数

中

实例（位于联系人的底部）：DEMO

问题是，当表单发送时，会出现一个动画，但是我无法通过关闭模式来删除它。我一直在调查，每个人都说它是因为事件需要由.on (bind)触发，但是如果我需要通过按下来删除该元素！在这种情况下，我需要通过执行另一个操作（关闭模态）来删除它。

var url = "formulario.php";
$.ajax(
{
    type: "POST",

    url: url,

    data: $("#formulario").serialize(),

    success: function(data)
    {                       
      $("#formulario_contacto").hide();

      $('.modal-content').append("<div id = "animation" class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>");              
    }
});

event.preventDefault();

Answer 1

您正在寻找的是jQuery提供的.off()方法。

使用它可以删除事件处理程序，如下所示。

$('.close-modal').off('click');

此外，如果您希望删除所有事件句柄，则可以使用

$('.close-modal').off();  // with no arguments

Answer 2

动态生成.close-modal吗？在这种情况下，您应该委托事件，例如：

$('.close-modal').on('click','body', function () {

    console.log("modal closed");
    $( "#animation" ).remove();

});

显然，将body更改为对您更方便的元素（可能是.modal-content？或.close-modal的任何静态元素父级）

Saludos同胞！

Answer 3

我猜你想要在模态关闭并重置表单时删除成功动画。根据您当前的演示：

1）你应该听Bootstrap的模态关闭事件而不是劫持关闭按钮上的点击（也可以通过点击背景或按ESC来关闭模态，这不会触发你的处理程序）。所以你应该做这样的事情：

$('#myModal').on('hidden.bs.modal', function () {
    // Modal was closed
})

2）在你的演示中，动画添加了id ==“contenedor-tick”。因此，如果您想在模态关闭时删除该动画：

$('#myModal').on('hidden.bs.modal', function () {
    $('#contenedor-tick').remove();
})

3）但是为了重置表单，你需要将它保存在DOM中。目前，您通过替换模态的整个内容来添加动画，从而丢失表单。我建议让你的HTML中已经存在动画（不要用JS添加它），并且默认情况下只使用CSS隐藏它。成功提交表单后，显示动画并隐藏表单。关闭模态后，隐藏动画并显示表单（并重置所有字段）。

删除动态添加的代码时出错 - jQuery

3 个答案: