As I read it, you want:
- one
<div class="names">
per todo (in this case inside.contents
) surrounding the todo text in aspan
and the buttons "Edit" / "Remove" - on clicking "Edit", the
span
is exchanged for aninput
field and an "Update" button, "Edit" and "Remove" are removed. - on clicking "Update", the prior state with the new text is recreated (
span
, Edit, Remove)
After you follow InkbugInkbug`s advice from his comment, you should probably do this:
cache the todo root element (
var todoRoot = $(...);
)rename
addUpdateField
/.update
toedit
/.edit
andupdateBtn
toupdate
- consistent with the button texts and easier to readchange the api of your todo.js functions. For update / edit / remove, just use the dom node of the div as the argument:
function(target, action) { todoRoot.on('click', target, function(e) { e.preventDefault(); e.stopPropagation(); action.call(todo, $(this).parents('.names').first()); }); } bindClick('.remove', todo.remove); bindClick('.edit', todo.edit); bindClick('div', todo.update);
don't use that many appends. Put it all in a string (that can contain more than one DOM node!)
don't create / delete all the nodes. Create all three buttons, use
.toggleClass(...)
and CSS to make all buttons/fields disappear that you don't need. That moves all your HTML into theadd
function and goes easy on the DOMmove the bindings into the
Todo
function. You don't want to have to remember to bind these events for every Todo list you create