11
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?
The script and source I have written:
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 :)