title: How to use jquery to remove a li item from ul and add to another on the same page
body: <p>I'm trying to remove a li item from one ul to another within the same page using JQuery, I've tried two ways but have been unsuccessful so far. In my last attempt I tried to use the delegate method and wire a click event on the button with class .checked. However, this deletes everything from the current ul I'm trying to remove the item from and doesn't add it to the the second ul with id completed tasks. </p>
  
  <p>Here are the two ul I'm trying to manipulate: </p>
  
  <pre><code>    &lt;ul id="incomplete-tasks"&gt;
       &lt;li&gt;&lt;label&gt;Milk&lt;/label&gt;&lt;button class="check"&gt;Check&lt;/button&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label&gt;Bread&lt;/label&gt;&lt;button class="check"&gt;Check&lt;/button&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label&gt;Eggs&lt;/label&gt;&lt;button class="check"&gt;Check&lt;/button&gt;&lt;/li&gt;
     &lt;/ul&gt;  
  
      &lt;ul id="completed-tasks"&gt;
      &lt;li&gt;&lt;label&gt;Fruits&lt;/label&gt;&lt;button class="uncheck"&gt;Uncheck&lt;/button&gt;&lt;button class="delete"&gt;Delete&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;Shoes&lt;/label&gt;&lt;button class="uncheck"&gt;Uncheck&lt;/button&gt;&lt;button class="delete"&gt;Delete&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;Fruits&lt;/label&gt;&lt;button class="uncheck"&gt;Uncheck&lt;/button&gt;&lt;button class="delete"&gt;Delete&lt;/button&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>And here is my JQuery code: </p>
  
  <pre><code>$(document).ready(function () {
  
      var $add_button = $('#add-item')
      var newItem;
      var $incompleteTasks = $('#incomplete-tasks');
      var $completedTasks = $('#completed-tasks')
  
      var li = $('&lt;li&gt;&lt;/li&gt;');
      var label = $('&lt;label&gt;&lt;/label&gt;');
      var button = $('&lt;button class="check"&gt;Check&lt;/button&gt;')
  
  
      $(document.body).on("click", 'button.check', function () {
          var $checked = $(this).parent();
          // var $ticked = $(this).prev()//get value of label element
  
          // label.text($ticked);
          // li.append(label); 
          // li.append(button);
          // $completedTasks.append(li); 
  
          $incompleteTasks.delegate("button.checked", "click", removeAndAdd);
  
          $checked.parent().remove();
      });
  
      $add_button.click(function () {
  
          newItem = $('#new-task').val();
  
          //create li element and assign it to variable
  
  
          //Use input value as the text for li item
          label.text(newItem);
  
  
          //append new item to incomplete tasks ul
  
          $incompleteTasks.append(li);
          li.append(label);
          li.append(button);
  
      });
  
  });
  
  function removeAndAdd() {
      var $incompleteTasks = $('#incomplete-tasks');
      var $completedTasks = $('#completed-tasks')
  
      $completedTasks.append(this);
  
  }
  </code></pre>