title: JQuery delete an appended li fom ul
body: <p>I am having problems deleting a list item <code>li</code> from it's parent <code>ul</code>. Normally I would do the following:</p>
  
  <pre><code>$(this).closest('li').remove();
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$(this).parent().remove();
  </code></pre>
  
  <p>As the list items are appended to the page via a form I think there is a problem with the <code>this</code> usage.</p>
  
  <p>My code that appends the <code>li</code> is as follows:</p>
  
  <pre><code>$(document).on('click', '.add_section', function(){
  var section_title=$('.section').val();
  var menu_type=$('.menu_type_sel').val();
  var rest_id=$('body').data('rest_id');
  var menu_id=$('body').data('menu_id');
  var error=false;
  if(section_title=="")
  {
      $('.error_box13').eq(2).html("&lt;p&gt;Please Add a Section Title&lt;/p&gt;");
      $('.error_box13').eq(2).show(300);
      error=true;
      return;
  }
  
  var data="section="+section_title+"&amp;rest_id="+rest_id+"&amp;menu_id="+menu_id+"&amp;menu_type="+menu_type;
  
  $.ajax({
      type:"POST",
      url:"includes/write_section.php",
      data:data,
      success:function(html){
          if(html!="x")
          {
          var app_section="";
          app_section="&lt;li class='hover' id='menu_"+html+"'&gt;"+section_title+" &lt;a href='javascript:void(0);' class='delete_section' data-id='"+html+"'&gt;[x]&lt;/a&gt;&lt;/li&gt;";
          $(app_section).appendTo('#sortme');
          $('.section').val("");
          }
      }
  });//end ajax
  });
  </code></pre>
  
  <p>To remove the <code>li</code> so far I have:</p>
  
  <pre><code> $(document).on('click', '.delete_section', function(){
  var delete_id=$(this).data('id');
  var data="id="+delete_id;
  alert(data);
  $.ajax({
      type:"POST",
      url:"includes/delete_section",
      data:data,
      context:this,
      success:function(html){
          if(html!="X")
          {
              $(this).closest('li').remove();
              return false;
          }
      }
  });//end ajax
  });
  </code></pre>
  
  <p>I have added the <code>context:</code> bit as a trial but this still does not delete the <code>li</code>.</p>