How to remove bootstrap modal that is being inserted by jQuery ?

Last Updated : 12 Jun, 2023

In this article, we will learn how to remove a Bootstrap modal that has been inserted via jQuery.

Approach 1: Use the click(), append() & remove() methods in the jQuery library.

There are two buttons defined in the following example, having the classes insert-modal and remove-modal respectively. In the jQuery script, a variable triggerModalBtn is declared and assigned the value of a typical markup of a button that opens the modal on click. Another variable modal is declared and assigned the value of a typical markup of a Bootstrap modal which is linked to the button defined before via its id exampleModal (the data-bs-toggle attribute in the button is given the value of the id of the Bootstrap modal).

We attach a click event to the button with the class of insert-modal using the click() method. On click, the button which triggers the modal along with the Bootstrap modal is appended to the body of the document using the append() method. Within this event listener, we attach another click event listener but this time to the button with the class of remove-modal. On clicking the remove-modal button, the button which triggers the modal along with the Bootstrap modal is removed using the remove() method.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
 
    <!-- jQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
            font-size: 40px;
        }
 
        p {
            font-size: 25px;
            font-weight: bold;
        }
 
        /*Styling the trigger modal button of the Bootstrap modal */
        .trigger-modal-btn {
            margin: 3rem auto 0 auto;
            display: block;
        }
 
        /*Styling the close button of the Bootstrap modal */
        .close {
            border: none;
            background: transparent;
            font-size: 1.5rem;
        }
 
        .close:hover {
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p>
          Remove Bootstrap modal that has 
          been inserted via jQuery
    </p>
 
    <button type="button"
            class="btn btn-secondary insert-modal">
        Click me to insert Bootstrap modal
    </button>
    <button type="button"
            class="btn btn-secondary remove-modal">
        Click me to remove Bootstrap modal
    </button>
    <script type="text/javascript">
        let triggerModalBtn = 
        `<button
            type="button"
            class="btn btn-primary trigger-modal-btn"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
    >
      Launch Bootstrap modal
       </button>`;
        let modal = `<div
            class="my-modal modal fade"
            id="exampleModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"
                id="exampleModalLabel">GeeksforGeeks</h5>
            <button type="button"
                    class="close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            GeeksforGeeks is a computer 
            science portal for geeks.
          </div>
          <div class="modal-footer">
            <button type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button"
                    class="btn btn-primary">
                    Save changes
            </button>
          </div>
        </div>
      </div>
    </div>`;
        $(".insert-modal").click(function () {
            $("body").append(triggerModalBtn);
            $("body").append(modal);
            $(".remove-modal").click(function () {
                $(".trigger-modal-btn").remove();
                $(".my-modal").remove();
            });
        });
    </script>
</body>
</html>

Output:

Approach 2: Using the click(), append(), on() & remove() methods in the jQuery library. This approach is quite similar to the previous approach but instead of removing the Bootstrap modal by attaching a click event listener to the remove-modal button within the insert-modal button, we simply delegate the click event handler such that the document is always listening for any click events originating from any element with a class of remove-modal. This is done using the on() method.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
    <!-- jQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
            font-size: 40px;
        }
 
        p {
            font-size: 25px;
            font-weight: bold;
        }
 
        /* Styling the trigger modal
        button of the Bootstrap modal */
        .trigger-modal-btn {
            margin: 3rem auto 0 auto;
            display: block;
        }
 
        /* Styling the close button of the
        Bootstrap modal */
        .close {
            border: none;
            background: transparent;
            font-size: 1.5rem;
        }
 
        .close:hover {
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p>
          Remove Bootstrap modal that
        has been inserted via jQuery
      </p>
 
    <button type="button"
            class="btn btn-secondary insert-modal">
        Click me to insert Bootstrap modal
    </button>
    <button type="button"
            class="btn btn-secondary remove-modal">
        Click me to remove Bootstrap modal
    </button>
    <script type="text/javascript">
        let triggerModalBtn = 
        `<button type="button"
                 class="btn btn-primary trigger-modal-btn"
                 data-bs-toggle="modal"
                 data-bs-target="#exampleModal"
    >
      Launch Bootstrap modal
    </button>`;
        let modal = 
        `<div class="my-modal modal fade"
              id="exampleModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="exampleModalLabel"
              aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"
                id="exampleModalLabel">
                GeeksforGeeks
            </h5>
            <button type="button"
                    class="close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            GeeksforGeeks is a computer
            science portal for geeks.
          </div>
          <div class="modal-footer">
            <button type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button"
                    class="btn btn-primary">
                    Save changes
            </button>
          </div>
        </div>
      </div>
    </div>`;
        $(document).on("click", ".remove-modal", function () {
            $(".trigger-modal-btn").remove();
            $(".my-modal").remove();
        });
 
        $(".insert-modal").click(function () {
            $("body").append(triggerModalBtn);
            $("body").append(modal);
        });
    </script>
</body>
</html>