如何删除 jQuery 插入的引导模式？

在本文中，我们将学习如何删除通过 jQuery 插入的 Bootstrap modal。

方法 1：使用 jQuery 库中的 click()、append() 和 remove() 方法。

以下示例中定义了两个按钮，分别具有 insert-modal 和 remove-modal 类。在 jQuery 脚本中，变量 triggerModalBtn 被声明并分配了一个按钮的典型标记的值，该按钮在单击时打开模式。另一个变量 modal 被声明并分配了 Bootstrap modal 的典型标记的值，该标记通过其 id exampleModal 链接到之前定义的按钮（按钮中的 data-bs-toggle 属性被赋予 Bootstrap 的 id 的值模态）。

我们使用 click() 方法将 click 事件附加到具有 insert-modal 类的按钮。单击时，触发模式的按钮和引导模式一起使用 append() 方法附加到文档的正文中。在这个事件侦听器中，我们附加了另一个点击事件侦听器，但这次是带有 remove-modal 类的按钮。单击 remove-modal 按钮时，使用 remove() 方法删除触发模式以及 Bootstrap 模式的按钮。

例子：

HTML



  

    
    
    
  
    
    
  
    
    

  

    GeeksforGeeks
    Remove Bootstrap modal that has been inserted via jQuery

HTML



  

    
    
    
  
    
    
  
    
    

  

    GeeksforGeeks
    Remove Bootstrap modal that 
       has been inserted via jQuery

输出：

方法 2：使用 jQuery 库中的 click()、append()、on() 和 remove() 方法。这种方法与以前的方法非常相似，但不是通过将单击事件侦听器附加到插入模式按钮中的删除模式按钮来删除引导模式，我们只需委托单击事件处理程序，以便文档始终侦听来自任何具有remove-modal类的元素的任何点击事件。这是使用on()方法完成的。

例子：

HTML



  

    
    
    
  
    
    
  
    
    

  

    GeeksforGeeks
    Remove Bootstrap modal that 
       has been inserted via jQuery

输出：