<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
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
>