Question

我试图找出如何使用.remove() jQuery方法删除弹出div元素。当我点击一个带有“.popUpTrigger”类的元素时，我有一个附加到#main div的div。然后，当我点击弹出窗口时，我想删除这个附加的HTML代码。

这是我的HTML：

<!DOCTYPE HTML>
  <html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jscript.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Title</title>
  </head>
  <body>
    <div id="main">
       <button class="popUpTrigger">Click to trigger the popUp!</button>
    </div>
  </body>
  </html>

我的jscript.js：

    function popUpCreate(idToAppend, popUpCode) {
       $(function() {
            $(idToAppend).append(popUpCode);
       });
     }


    $(function() {
        $(".popUpTrigger").click(function() {
        popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
         });
     });

  $(function() {
    $(".popUpBg").click(function() {
         $(".popUpBg").remove();
       });
   });

style.css文件：

      .popUpBg {
    position:fixed;
    z-index:999999;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    cursor:pointer;
      }

      .popUpItSelf {
    position:fixed;
    z-index:9999999;
    width:400px;
    height:200px;
    text-align:center;
    top:50%;
    left:50%;
    margin-left:-401px;
    margin-top:-301px;
    background:white;
    border: 1px solid black;
    font-size: 4em;
    color:black;
    font-weight:bold;
    padding:200px;
         }

但它不起作用，我希望在点击.popUpBg（这是弹出式背景）时删除弹出窗口。

我怎样才能做到这一点？

Answer 1

这是通过单击背景

来删除弹出窗口

$('.popUpBg').on('click', function() {
    $('.popUpItSelf').remove();
});

要删除背景和弹出窗口，只需执行此操作。

$('.popUpBg').on('click', function() {
    $('.popUpItSelf, .popUpBg').remove();
});

Answer 2

在点击查找尚不存在的对象（背景）时附加处理程序。

首先，我重写您自己的代码以使其更具可读性

function popUpCreate(idToAppend, popUpCode) {
   $(idToAppend).append(popUp);
}

$(".popUpTrigger").click(function() {
    popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
});


$(".popUpBg").click(function() {
    $(".popUpBg").remove();
});

现在，我进行了修正

function popUpCreate(idToAppend, popUpCode) {
    $(idToAppend).append(popUp);
    $(".popUpBg").click(function() {
        $(".popUpBg").remove();
    });
}

$(".popUpTrigger").click(function() {
    popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
});

如何使用jQuery删除附加.append（）方法的弹出式div？

2 个答案: