如何使用jQuery删除附加.append（）方法的弹出式div？
[英]How to remove a pop-up div appended with .append() method using jQuery?
问题描述
I am trying to figure out how can I remove a pop-up div element using the .remove() jQuery method. 
我试图找出如何使用.remove() jQuery方法删除弹出div元素。 I have a div which is appended to the #main div when the I click on an element with class ".popUpTrigger". 当我点击一个带有“.popUpTrigger”类的元素时，我有一个附加到#main div的div。 Then I would like to remove this appended HTML code when I click on the pop-up itself. 然后，当我点击弹出窗口本身时，我想删除这个附加的HTML代码。
Here is my 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>
My jscript.js: 我的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();
});
});
The style.css file: 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;
}
But it does not work, I want the pop-up to be removed when I click on the .popUpBg (which is the pop-up background). 但它不起作用，我希望当我点击.popUpBg （这是弹出背景）时删除弹出窗口。
How can I achieve that? 我怎样才能做到这一点？
2 个解决方案
解决方案1
1 2014-01-04 19:45:08
This is to remove the popup by clicking on the background 这是通过单击背景来删除弹出窗口
$('.popUpBg').on('click', function() {
$('.popUpItSelf').remove();
});
To remove both the background and the pop up, just do this. 要删除背景和弹出窗口，只需执行此操作即可。
$('.popUpBg').on('click', function() {
$('.popUpItSelf, .popUpBg').remove();
});
解决方案2
1 已采纳 2014-01-04 19:48:40
You append an handler on click for an object (the background) that not yet exists. 在单击时附加一个尚不存在的对象（背景）的处理程序。
First, I rewrite your own code to be more readable 首先，我重写您自己的代码以使其更具可读性
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();
});
Now, I make the correction 现在，我进行了修正
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>");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.