【发布时间】：2017-01-23 17:36:44
【问题描述】：
我正在编写一段代码，以便在用户通过点击触发事件后动态加载我的部分内容。
案例场景是：当用户点击帖子时，会打开一个modal并显示详细视图，这是使用链接中的slug动态生成的内容。但是，当用户关闭modal 时，我需要从DOM 中删除模式。目前我只能hide它，但我需要删除它。
这是我的代码。
PHP Laravel HTML 标记（）：
<div class="content-blocks blog hidex">
<section class="content">
<div class="block-content">
<h3 class="block-title">My Blog</h3>
<div id="post-list" class="col-md-10 col-md-offset-1">
{% set posts = blogPosts.posts %}
{% for post in posts %}
<div class="post">
<div class="post-thumbnail">
{% if post.featured_images.count %}
{% set image = post.featured_images|first %}
<a class="open-post" href="{{'blog-post'|page}}">
<img
data-src="{{ image.filename }}"
src="{{ image.path }}"
alt="{{ image.description }}"
style="max-width: 100%"/>
</a>
{% endif %}
</div>
<div class="post-title">
<a class="open-post" href="{{ post.url }}"><h2>{{ post.title }}</h2></a>
<p class="post-info">
<span class="post-author">Posted by {{ post.user.first_name}} </span>
<span class="slash"></span>
<span class="post-date">on {{ post.published_at|date('M d, Y') }}</span>
<span class="slash"></span>
{% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<span class="post-category">{{ category.name }}</span>
{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
</div>
<div class="post-body">
<p>{{ post.summary }}</p>
<a class="btn open-post" href="{{ post.url }}">Read More</a>
</div>
</div>
{% endfor %}
<div class="text-center">
{% if posts.lastPage > 1 %}
<ul class="pagination">
{% if posts.currentPage > 1 %}
<li>
<a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a></li>
{% endif %}
{% for page in 1..posts.lastPage %}
<li class="{{ posts.currentPage == page ? 'active' : null }}">
<a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
</li>
{% endfor %}
{% if posts.lastPage > posts.currentPage %}
<li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</section>
</div>
JavaScript：
//Blog post Modal
$('.open-post').on('click', function(){
var postUrl = $(this).attr("href");
var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';
$(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');
});
DOM 中 Javascript 代码的结果：
<div class="modal in" id="post-modal" style="display: block; padding-left: 0px;">
<div class="inline-menu-container">
<a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a>
</div>
<div class="modal-dialog">
<div class="modal-content">
/// all the dynamic content in the modal
</div>
</div>
现在我需要在不刷新页面的情况下删除此结果。
更新：
这是关闭modal 后在 Inspect 中的 HTML 的外观：
注意：
我尝试使用 #post-modal id 从 DOM 中删除模态内容，但没有成功。此外，我还没有找到使用Delegate 的示例，而模态元素和内容在加载“DOM”后完全由 javascript 添加。
【问题讨论】：
-
你为什么不试试css？
.modal-dialog{ display: none !important; } -
@I.G.Pascual 我在模式中有一个 JQuery Sildeshow，由于 DOM 中有多个元素，每当我第二次打开页面时都会引发异常。所以我需要从 DOM 中删除模式。
-
那么 javascript 就是答案
-
你试过
$(function(){ $("#post-modal").remove(); $(".modal-dialog").remove(); });吗？ -
@I.G.Pascual 我使用了你的函数，比如
$(document) .on('hidden.bs.modal', '.modal', function () { $("#post-modal").remove(); $(".modal-dialog").remove(); });，它起作用了
标签： javascript html twitter-bootstrap bootstrap-modal