jQuery - remove()方法无效

Question

jQuery - remove()方法无效

javascriptjquerycsshtml

11

我有一个脚本，可以根据鼠标在页面上的位置放置

元素。我有一个按钮，上面写着“清除”，我想使用它来清除创建的

元素。我该如何实现？

我编写的脚本和源代码：

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

$(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/

任何帮助都将不胜感激 :)

- Mohammad Areeb Siddiqui

5个回答

2

clear函数应该在全局范围内。否则，将按钮命名为button1并使用jQuery将该函数添加为click事件侦听器。

http://jsfiddle.net/BpAYz/2/

代码:

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

<body>
    <button id="button1" style="z-index: 2000;" class="clear">Clear</button>
</body>

我刚刚修改了你的代码，请在函数中声明变量时使用var关键字。

- Diode

但我已经将类添加到该按钮了，这会有影响吗？ - Mohammad Areeb Siddiqui

2

请按照以下方式操作：http://jsfiddle.net/Qn9yL/1/

应该绑定按钮的点击事件，而不是使用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();
    });

})

您还希望执行e.preventDefault()，以防止事件冒泡并创建新的div等。

- Luke Cousins

1

您需要执行以下操作：-

清除

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

})

- pvnarula

这将为所有按钮添加点击监听器，但我想要具有类“.clear”的按钮。 - Mohammad Areeb Siddiqui

好的，但是如果我移除这个“按钮”，会有问题吗？ - Mohammad Areeb Siddiqui

当有人在文档上按下鼠标时，您想创建并打开一个div吗？ - pvnarula

stopPropagation() 的意思是停止文档上的任何其他事件执行，因此它只会触发按钮事件而不是在单击按钮时触发文档上的事件。 - pvnarula

那么它将如何点击按钮？ - Mohammad Areeb Siddiqui

它会触发按钮事件而不是文档。 - pvnarula

-5

这适用于连续的元素：

<style media="all">
.theDiv {
    display:none;
}
</style>

- Michael Kearney

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nnnnnn · Accepted Answer

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

请注意，我在你的mousedown处理程序中变量前面添加了var：没有var它们会变成全局变量，这只会使你的代码更容易出错并且难以调试。（除非你有一个好的理由说它们应该是全局的？）