jQuery - 删除（）不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16999143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - remove() not working
提问by Mohammad Areeb Siddiqui
I have a script that places divs according the position of mouse on the body of a page. I have a button which says "Clear" and I want to use it to clear the divs created. How can I achieve that?
我有一个脚本，它根据鼠标在页面正文上的位置放置 div。我有一个按钮，上面写着“清除”，我想用它来清除创建的 div。我怎样才能做到这一点？
The script and source I have written:
我写的脚本和来源：
HTML
HTML
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="bhaiya.js"></script>
<button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button>
</body>
</html>
jQuery
jQuery
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
function clear() {
$(".theDiv").remove();
}
})
jsFiddle:http://jsfiddle.net/BpAYz/
jsFiddle：http : //jsfiddle.net/BpAYz/
Any help would be appreciated :)
任何帮助，将不胜感激 ：）
采纳答案by nnnnnn
Inline html attribute event handlers can only call globalfunctions. Your clear()function is notglobal because it is defined insideyour document ready handler, so your onclick="clear()"can't find it. You need to either move the function outside the ready handler (making it global), or, better, bind the click with jQuery:
内联 html 属性事件处理程序只能调用全局函数。你的clear()函数不是全局的，因为它是在你的文档就绪处理程序中定义的，所以你onclick="clear()"找不到它。您需要将函数移到就绪处理程序之外（使其成为全局），或者更好地使用 jQuery 绑定单击：
$(document).ready(function(){
$(this).mousedown(function(e){
var $x = e.pageX;
var $y = e.pageY;
var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$(".clear").click(function () {
$(".theDiv").remove();
});
});
Note also that I've added varin front of the variables in your mousedown handler: without varthey become global variables, which just makes your code more error prone and hard to debug. (Unless you have a good reason why they shouldbe globals?)
另请注意，我var在 mousedown 处理程序中的变量前面添加了：如果没有var它们成为全局变量，这只会使您的代码更容易出错且难以调试。（除非你有充分的理由为什么它们应该是全局变量？）
回答by Luke Cousins
Do it like this: http://jsfiddle.net/Qn9yL/1/
这样做：http: //jsfiddle.net/Qn9yL/1/
You should attach to the click even of the button rather than using onclick.
您应该附加到按钮的单击，而不是使用 onclick。
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$('#clear').click(function(e){
e.preventDefault();
$(".theDiv").remove();
});
})
You also want to do the e.preventDefault(); to stop the event then bubbling up and creating a new div etc.
你还想做 e.preventDefault(); 停止事件然后冒泡并创建一个新的div等。
回答by Diode
The function clearshould be in global scope. Otherwise give an id button1to the button and add the function as the clickevent listener using jQuery.
该函数clear应该在全局范围内。否则给button1按钮一个 id并click使用 jQuery添加函数作为事件侦听器。
Code:
代码：
JS
JS
$(document).ready(function () {
$(this).mousedown(function (e) {
if (!$(e.target).is("#button1")) {
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
}
});
$(".clear").click(function () {
$(".theDiv").remove();
});
})
HTML
HTML
<body>
<button id="button1" style="z-index: 2000;" class="clear">Clear</button>
</body>
I have just modified your code. Please use varkeyword when declaring variables in a function.
我刚刚修改了你的代码。var在函数中声明变量时请使用关键字。
回答by pvnarula
You need to do this:-
你需要这样做：-
Clear
清除
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$(document).on("click", "button.clear", function(e){
e.stopPropagation();
$(".theDiv").remove();
})
})
})
回答by Michael Kearney
This works with successive elements:
这适用于连续元素：
<style media="all">
.theDiv {
display:none;
}
</style>
