javascript - Clear Unordered list button not working -
i have been staring @ problem hours. starting larn jquery , have little project requires me utilize button clear elements of unordered list.
first, track mouse posistion , mouse-click of user. each time click button, build unordered list , record x,y posistions. then, supposed utilize button clear list. seems work fine, button when clicked, adds list instead of clearing it.
can help me spot issue?
<!doctype html> <head> <title>click away</title> <link href="stylesheets/standard.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> var count = 0; $("html").click(function(){ count++; $("#display").html("the click count is: " + count); }); $("html").click(function(e) { var xpos = e.pagex; var ypos = e.pagey; $("#list").append("<li>" + xpos + ", " + ypos + "</li>"); }); //this section can't work $("#clear").click(function () { $("#list").remove(); }); </script> </head> <body> <h1> click away</h1> <h2>start clicking...</h2> <h2 id="display"></h2> <button id="clear">clear location list</button> <h2>click locations:</h2> <ul id="list"></ul> </body> </html>
use $("#list").empty();
using $("#list").children().remove(); work first 1 more efficient.
i think should exclude clear button list , set code within .ready() handler code executes after dom ready , elements loaded:
$(document).ready(function(e) { var count = 0; $("html").click(function () { count++; $("#display").html("the click count is: " + count); }); $("html").click(function (e) { if (e.target !== document.getelementbyid('clear')) { //exclude clear button var xpos = e.pagex; var ypos = e.pagey; $("#list").append("<li>" + xpos + ", " + ypos + "</li>"); } }); $("#clear").click(function () { $("#list").empty(); //empty list }); }); javascript jquery
No comments:
Post a Comment