Time for action – moving tasks within the list
While we're at it, let's add buttons to move tasks up and down in the list. For this we'll add some more code to the addTaskElement()
method. First we need to create move-up
and move-down
buttons, and then add them to the list element along with the delete
button.
function addTaskElement(taskName) { var $task = $("<li></li>"); var $delete = $("<button class='delete'>X</button>"); var $moveUp = $("<button class='move-up'>^</button>"); var $moveDown = $("<button class='move-up'>v</button>"); $task.append($delete) .append($moveUp) .append($moveDown) .append("<span class='task-name'>" + taskName + "</span>"); $("#task-list").append($task); $delete.click(function() { $task.remove(); }); $moveUp.click(function() ...
Get HTML5 Web Application Development By Example Beginner's guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.