jQuery .remove not working for nested element

Question

I'm trying to simply remove all nested li elements within ul, but it is not working. Why won't this snippet work? What am I missing?

html

<ul id="myul">
</ul>
<br/>
<button onclick="add();">add</button><br/>
<button onclick="remAll();">remove all</button>

js

function add()
{
    $('#myul').append('<li>hello world</li>');
}

function remAll()
{
    $('#myul').remove('li');
}

http://jsfiddle.net/gPnxY/

Answer 1

Do this instead, the selector argument for remove() is a filter for the object in question. In this case the object in question is just the single element with the id myUl, therefore not containing any <li> elements.

jsFiddle

$('#myul').find('li').remove();

or

$('#myul li').remove();

Answer 2

jsFiddle here

This is nice:

$('#myul').empty();

Read more cool stuff: http://api.jquery.com/empty/

Also:

$('#myul').find('li').remove();
$('#myul li').remove();
$('#myul').contents().remove();
$('#myul').html('');