Jquery .remove 不会删除父项 div

Question

好的，所以我有一堆缩略图，单击它们会打开包含更多信息的模式。我无法弄清楚如何使用 jquery 删除模式。

<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>

这是代码笔http://codepen.io/Ella33/pen/rrpBOO

请帮忙！

Answer 1

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

Answer 2

您只需要先加载 jQuery 库。

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

在 Codepen 的 JS 部分中，单击上面写着添加外部文件的 cog 放置要加载的行 jQuery

Answer 3

要使用 JQuery 关闭模式，请使用以下

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

Answer 4

将 jQuery 库添加到您的代码笔。将 <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> 以使用 class modal-content.

关闭 div

Jquery .remove 不会删除父项 div

Jquery .remove does not delete parent div

jquery

parent-child

selection