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>

这是一个codepen 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

在JS部分的codepen中点击它所说的添加外部文件的cog放置该行以加载jQuery

Answer 3

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

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

Answer 4

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

Jquery .remove不会删除父div

4 个答案: