Jquery .remove不会删除父div

好的，所以我有一堆缩略图，当点击打开了更多信息的模态。我无法弄清楚如何使用jquery删除模态。Jquery .remove不会删除父div

<div class="modal" id="modal"> 
<div class="modal-content "> 
    <h1>Modal Title</h1> 
<p>help....</p> 
<button href="#" class="close" id="close" >X</button> 
<div class="modal-content "> 
</div>

这里是Jquery的

<script> 
$(document).ready(function() { 
    $("#close").on("click", function() { 
     $("#modal").remove(); 
    }); 
</script>

这里是一个codepen http://codepen.io/Ella33/pen/rrpBOO

请帮助！

来源

2016-10-05 Lisa Frank

完全披露我是jquery的完整noob ... –

Sergio和Howzieky下面的答案都是很好的补充。看你[升级CodePen在这里]（http://codepen.io/Bes7weB/pen/VKykxG） –

在您的codepen的第8行上，将<div class="modal-content ">更改为</div>。你从来没有关闭第3行的div。我假设你已经在你的实际产品中有jQuery，但它不是，添加它。

来源

2016-10-05 00:56:46 Howzieky

是这是什么，不能相信我没有看到。谢谢！！！ –

没问题，祝你的项目好运！ – Howzieky

你只需要首先加载jQuery库。

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

在对COG的JS部分点击的地方说添加外部文件代替该行加载jQuery的

来源

2016-10-05 00:57:50

要使用JQuery使用以下

$(document).ready(function() { 
    $("#close").on("click", function() { 
     $("#modal").modal('hide'); 
    });

来源

2016-10-05 00:59:38 Vijai

这不是问题......但我同意隐藏而不是删除可以是一个好建议......这取决于上下文。仍然。你的答案是在树林里解决问题。 –

添加模式关闭codepen jQuery库到你的codepen。直接将<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>添加到您的html中或单击JS部分中的齿轮图标并添加外部库。此外，在您的HTML，在线8更改<div class="modal-content ">到</div>关闭与类modal-content div。

来源

2016-10-05 07:18:47 Abhay

Jquery .remove不会删除父div

回答

相关问题