如何删除引导模式'；是通过jQuery插入的吗？

我决定要有一个脚本，如果我需要插入自定义引导模式，我可以使用它。我不想让空的静态引导模式HTML放在每个页面的底部，如果它不总是被利用的话

所以，这可能是错误的做法，但这是我的尝试。 我创建了一个变量，它是模态“shell”html。然后，当我单击一个设备项时，它会附加到主体中。我有一些内容，然后被克隆并附加到modal的标题和正文中。一切正常。但一旦关闭，我就无法移除模态。这与我通过JS插入HTML有关，因为如果模态shell HTML静态存在于我的HTML页面中，那么remove可以很好地工作

HTML:

装置4
设备类型：
非常酷的设备
设备ID:
123456

jQuery：

var customModal = $(
    '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \ 
        <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> \
        <div class="modal-body"></div> \
        <div class="modal-footer"><button class="btn" data-dismiss="modal">Close</button></div> \
    </div>'
);

$('.device').click(function(){
    $('body').append(customModal);
    $(this).find($('h3')).clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});

 $('.custom-modal').on('hidden', function(){
    $(this).remove();
});

var customModal=$(
' \ 
× \
\
接近\
'
);
$（'.device'）。单击（函数（）{
$（'body'）.append（customModal）；
$（this.find（$（'h3'））.clone（）.appendTo（'.custom-modal.modal-header'）；
$（this）.find（'.device-product，.device-details'）.clone（）.appendTo（'.custom-modal.modal-body'）；
$（'.custom modal.hide'）.show（）；
$（'.custom modal'）.modal（）；
});
$（'.custom modal'）。在（'hidden'，function（）上{
$（this.remove（）；
});

---

所以实际上，这只是我正在努力解决的问题。但是，任何关于我是否以错误/低效的方式进行此操作的评论都有助于学习

在将

自定义模式

div添加到DOM之前，您正试图为

隐藏的
事件绑定事件处理程序，因此事件处理程序永远不会绑定到任何对象

你可以用两种方法来做

委派
隐藏的
事件处理程序，以便文档始终侦听来自具有自定义模式类的任何元素的
隐藏的
事件：

$(document).on('hidden', '.custom-modal', function () {
    $(this).remove();
});


将模态div添加到DOM后绑定事件处理程序：

$('.device').click(function(){
    // Push the modal markup into the DOM
    $('body').append(customModal);

    // Now that it's in the DOM we can find it and bind an event handler
    $('.custom-modal').on('hidden', function () {
        $(this).remove();
    });

    // Continue with other init tasks
    $(this).find('h3').clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});


选项1更可取，尤其是当有可能打开多个模态时。
这是从DOM中删除
.custom modal
div，但我有一个单独的问题，当再次触发模态时，它仍然包含来自上一个触发器的附加内容。您没有在问题中描述此“单独问题”。您有可以共享的测试页面或JSFIDLE吗？找到它：停止将
customModal
包装为jQuery对象。将其作为字符串传递。e、 g.customModal='在jQuery中包装标记的更新JSFIDLE将其转换为分配给customModal变量的DOM片段。调用
remove
将元素从DOM中拉出，但修改后的DOM片段仍然存在于变量customModal中，该变量将在下次再次修改为DOM，并且更改后的内容仍然存在。对于在此处登录的其他人，我必须使用以下命令：
$（文档）。on（'hidden.bs.modal'，'.custom modal'，function（）{$（this.remove（）；}）；
$('.device').click(function(){
    // Push the modal markup into the DOM
    $('body').append(customModal);

    // Now that it's in the DOM we can find it and bind an event handler
    $('.custom-modal').on('hidden', function () {
        $(this).remove();
    });

    // Continue with other init tasks
    $(this).find('h3').clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});