Javascript 如何使用jQuery删除追加了.append（）方法的弹出div？_Javascript_Jquery_Css_Popup

Javascript 如何使用jQuery删除追加了.append（）方法的弹出div？

javascript jquery css

Javascript 如何使用jQuery删除追加了.append（）方法的弹出div？,javascript,jquery,css,popup,Javascript,Jquery,Css,Popup,我试图弄清楚如何使用.remove（）jQuery方法删除弹出div元素。我有一个div，当我单击一个类为“.popUpTrigger”的元素时，它会附加到#main div。然后，当我单击弹出窗口本身时，我想删除这个附加的HTML代码这是我的HTML： <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html"

我试图弄清楚如何使用

.remove（）

jQuery方法删除弹出div元素。我有一个div，当我单击一个类为“.popUpTrigger”的元素时，它会附加到#main 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>

但它不起作用，我希望在单击

.popubg

（即弹出背景）时删除弹出窗口

如何实现这一点？

这是通过单击背景来删除弹出窗口

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

要同时删除背景和弹出窗口，只需执行以下操作

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

您可以在单击时为尚未存在的对象（背景）附加处理程序

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

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();
});

函数popUpCreate（idToAppend，popUpCode）{
$（idToAppend）.append（弹出窗口）；
}
$（“.popUpTrigger”）。单击（函数（）{
弹出式创建（“main”，“Hello！”）；
});
$（“.popubPG”）。单击（函数（）{
$（“.popubPG”）.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>");
});

函数popUpCreate（idToAppend，popUpCode）{
$（idToAppend）.append（弹出窗口）；
$（“.popubPG”）。单击（函数（）{
$（“.popubPG”）.remove（）；
});
}
$（“.popUpTrigger”）。单击（函数（）{
弹出式创建（“main”，“Hello！”）；
});

您需要委托click Event，因此在您的解决方案中，每次调用函数popUpCreate（）时都会自动生成处理程序，对吗？谢谢！只有一件事。即使我单击弹出窗口本身，弹出窗口也会被删除，我如何避免呢？使用事件处理程序中的事件参数，类似于。。。单击（函数（事件）{if（event.target…）…}）；或者可能是currentTarget我不记得了对不起，我不明白，我刚开始使用JQuery。。。你能更具体地解释一下吗？好的，在点击事件处理程序上，你可以有一个事件参数，它提供了关于真实点击事件的所有信息。因此，请检查$（event.target）.hasClass（'popubPG'），现在，您可以确定单击的是背景，而不是背景的子项…感谢您的回复，上面的答案适合我。

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>");
});