title: Removing bootstrap Modal from DOM
body: <p>I am working on a piece of code to load part of my content dynamically after user triggers the event by clicking.</p>
  
  <p>Case Scenario is: when user clicks on the post, it will open a <code>modal</code> and display the detailed view which is the dynamic generated content using the <code>slug</code> in the link. However, I need to remove the modal from the <code>DOM</code> when user closes the <code>modal</code>. for now i have only been able to <code>hide</code> it but I need to remove it.</p>
  
  <p>here is my code.</p>
  
  <p><strong>PHP Laravel HTML Markup ():</strong></p>
  
  <pre><code>&lt;div class="content-blocks blog hidex"&gt;
  
          &lt;section class="content"&gt;
              &lt;div class="block-content"&gt;
                  &lt;h3 class="block-title"&gt;My Blog&lt;/h3&gt;
                  &lt;div id="post-list" class="col-md-10 col-md-offset-1"&gt;
  
                      {% set posts = blogPosts.posts %}
  
                      {% for post in posts %}
                      &lt;div class="post"&gt;
  
                          &lt;div class="post-thumbnail"&gt;
                              {% if post.featured_images.count %}
                              {% set image = post.featured_images|first %}
                              &lt;a class="open-post" href="{{'blog-post'|page}}"&gt;
                                  &lt;img
                                          data-src="{{ image.filename }}"
                                          src="{{ image.path }}"
                                          alt="{{ image.description }}"
                                          style="max-width: 100%"/&gt;
  
                              &lt;/a&gt;
                              {% endif %}
                          &lt;/div&gt;
                          &lt;div class="post-title"&gt;
                              &lt;a class="open-post" href="{{ post.url }}"&gt;&lt;h2&gt;{{ post.title }}&lt;/h2&gt;&lt;/a&gt;
                              &lt;p class="post-info"&gt;
  
  
                                  &lt;span class="post-author"&gt;Posted by {{ post.user.first_name}} &lt;/span&gt;
                                  &lt;span class="slash"&gt;&lt;/span&gt;
                                  &lt;span class="post-date"&gt;on {{ post.published_at|date('M d, Y') }}&lt;/span&gt;
                                  &lt;span class="slash"&gt;&lt;/span&gt;
                                  {% if post.categories.count %} in {% endif %}
                                  {% for category in post.categories %}
                                  &lt;span class="post-category"&gt;{{ category.name }}&lt;/span&gt;
                                  {% if not loop.last %}, {% endif %}
                                  {% endfor %}
                              &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="post-body"&gt;
                              &lt;p&gt;{{ post.summary }}&lt;/p&gt;
                              &lt;a class="btn open-post" href="{{ post.url }}"&gt;Read More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      {% endfor %}
  
                      &lt;div class="text-center"&gt;
                          {% if posts.lastPage &gt; 1 %}
                          &lt;ul class="pagination"&gt;
                              {% if posts.currentPage &gt; 1 %}
                              &lt;li&gt;
                                  &lt;a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
                                     aria-label="Previous"&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
                                  &lt;/a&gt;&lt;/li&gt;
                              {% endif %}
  
                              {% for page in 1..posts.lastPage %}
                              &lt;li class="{{ posts.currentPage == page ? 'active' : null }}"&gt;
                                  &lt;a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}"&gt;{{ page }}&lt;/a&gt;
                              &lt;/li&gt;
                              {% endfor %}
  
                              {% if posts.lastPage &gt; posts.currentPage %}
                              &lt;li&gt;&lt;a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
                                     aria-label="Next"&gt;
                                  &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;/li&gt;
                              {% endif %}
                          &lt;/ul&gt;
                          {% endif %}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong> </p>
  
  <pre><code>//Blog post Modal
      $('.open-post').on('click', function(){
          var postUrl = $(this).attr("href");
  
          var post = '&lt;div class="modal" id="post-modal"&gt;&lt;div class="inline-menu-container"&gt;&lt;a id="modal-close" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          $(post).modal({
            remote: postUrl
          })
  
          return false;
      });
  // close the modal
     $('#close').on( 'click', function() {
        $('.name-block').removeClass('reverse');
        $('.name-block-container').removeClass('reverse');
        $('.menu-blocks').removeClass('hidex');
        $('.content-blocks').removeClass('showx');
        $('.content-blocks').addClass('hidex');
        $('.inline-menu-container').removeClass('showx');
        $('.inline-menu-container').addClass('hidex');
        $('.menu-item').removeClass('active');
      });
  </code></pre>
  
  <p><strong>result of Javascript code in the DOM:</strong></p>
  
  <pre><code>&lt;div class="modal in" id="post-modal" style="display: block; padding-left: 0px;"&gt;
      &lt;div class="inline-menu-container"&gt;
      &lt;a id="modal-close" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="modal-dialog"&gt;
     &lt;div class="modal-content"&gt;
     /// all the dynamic content in the modal
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I need to remove this result without refreshing the page.
  <strong>Update:</strong>
  This is how it looks in the HTML in Inspect after closing the <code>modal</code>:
  <a href="https://i.stack.imgur.com/zgSsU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zgSsU.png" alt="enter image description here"></a></p>
  
  <p><strong>Note:</strong> 
  I tried to remove the modal content from the DOM using the <code>#post-modal</code> id but wasn't successful. also, i haven't been able to find an example of using <code>Delegate</code> while the modal elements and content are completely added by javascript after loading the 'DOM'.</p>