Question

i wonder why in the following example, trying to detach an element (li) causes the form containing it to submit

html

<form id="frmToDo" name="frmToDo">
  <p id="lineInput">
    ...
    <input type="submit" id="btnSubmit" value="Add" />
  </p>
  <ul id="todolist">
      <!-- added in ajax -->
  </ul>
</form>

JS

$("#frmToDo").submit(function() {
    // this runs after: $("#todolist").detach(...)
});

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $("#todolist").detach($($(this).parent()).id());
    return false;
});

Answer 1

I guess you just want to remove the li element in which the button was clicked.

So instead of using

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $("#todolist").detach($($(this).parent()).id());
    return false;
});

Try using

$("#todolist").delegate("li[id^=task-] button", "click", function() {
    $(this).parent().detach();
    return false;
});