title: What selector to use for the click event of a button
body: <p>In my jQuery, I add a series of li elements, and each li element has a button that is a child element. What I'm trying to do is make a click event handler to attach to the button, that will remove both the button and it's parent li element, when clicked. This is my HTML:</p>
  
  <pre><code>        &lt;div id="empty_message" class="open"&gt;
              &lt;h3&gt;You have no tasks left to accomplish!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="tasklist"&gt;
              &lt;ol class="list" id="list"&gt;  
              &lt;/ol&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This is the jQuery I wrote:</p>
  
  <pre><code>$("#add_task").click(function() {            
          //create a li, save input in there, and add to ol
          var new_task = $('&lt;li&gt;&lt;/li&gt;');
          new_task.text($("#add_todo").val());
          //new_task.attr('id', 'new_task');
          new_task.appendTo('ol.list');
  
          if (new_task)
          //create button and attach it to new li element
          var new_button = $('&lt;input /&gt;').addClass('done');
          new_button.attr({
              type : "button",
              value : "Task Accomplished!"
          });
          new_button.appendTo(new_task);
  
      }
  
      $("#add_todo").val("").focus();
  
  });
  //end click event of Add task button
  
  $('.done[value="Task Accomplished!"]').click(function() {
      $(function () {
          alert("This is working.");
      });
      //hide &lt;li&gt; element
      $(this).parentElement.remove();
  
      //if list is empty, show empty message
      if ($("#list li").length == 0)
          $("#empty_message").show();
  
      $("#add_todo").focus();
  });
  //end click event of Task Accomplished button
  </code></pre>
  
  <p>The Add Task button (first function) is working. I can't figure out why the Task Accomplished button won't work!! Can anyone help me out?</p>