Geek Answers Handbook

JQuery - remove () not working

I have a script that places divs according to the position of the mouse on the body of the page. I have a button that says “Clear”, and I want to use it to clear created divs. How can I achieve this?

script and source I wrote:

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/

Any help would be appreciated :)

+7
source share
5 answers

Inline html attribute event handlers can only call global functions. Your clear() function is not global because it is defined inside your document handler, so your onclick="clear()" cannot find it. You need to either move the function outside the finished handler (making it global), or, better, bind the click using 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(); }); });

Notice also that I added var before the variables in the mousedown handler: without var they become global variables, which just makes your code more error prone and hard to debug. (If you have a good reason, why should they be global?)

+7
source

The clear function must be in the global scope. Otherwise, enter id button1 on the button and add the function as a click event listener using jQuery.

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

the code:

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>

I just changed your code. Use the var keyword when declaring variables in a function.

+2
source

Do it like this: http://jsfiddle.net/Qn9yL/1/

You should attach even buttons to the click, and not use 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 e.preventDefault (); to stop the event, then activated and created a new div, etc.

+2
source

You need to do the following: -

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

})

+1
source

This works with sequential elements:

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

More articles:


All Articles