How to remove the last <li> </li> using jQuery?

Question

<div id="q"> <ul><li> <table><tr><td>Question 1</td><td><input type="text" name="question1" size="60" /></td></tr> <tr><td>Answer:</td><td><input type="text" name="answer1" size="8" /></td></tr> </li></ul> </div> <input class="btn" id="addquestion" type="button" value="Add Question" /> <input class="btn" id="removequestion" type="button" value="Remove Question" /> <script> $('#addquestion').click(function() { var $question_number = $('#q li').size() + 1; $html='<li><table><tr><td>Question '+$question_number+'</td><td><input type="text" name="question'+$question_number+'" size="60" /></td></tr>\ <tr><td>Answer:</td><td><input type="text" name="answer'+$question_number+'" size="8" /></td></tr></li>'; $('#q ul').append($html); }); $('#addquestion').click(function() { $('#q li:last').remove(); }); </script> 

$ ('# q li: last'). remove (); does not work. What's wrong?

Answer 1

If you want to remove the last li element inside #d , you can simply use the :last selector:

 $('#q li:last').remove(); 

If you want to remove every last child li from its immediate parent ( ul elements if you have more than one), you can use :last-child selector:

 $('#q li:last-child').remove(); 

Answer 2

Try:

 var lis = $('#q ul').children(); // get all the children $(lis.get(lis.length-1)).remove(); // remove the last one