How to remove <li></li> from ul?

Question

how to remove a particular <li></li> from the ul list? i am adding it dynamically... and i need to remove it when the user click on clear. how can i do that?

Answer 1

That depends on what you have and what you're adding. Assuming you end up added items so it looks like this:

<ul id="list">
  <li><a href="#" class="clear">clear</a></li>
  <li><a href="#" class="clear">clear</a></li>
  <li><a href="#" class="clear">clear</a></li>
</ul>

then use remove() to remove a single item:

$("#list a.clear").click(function() {
  $(this).parent().remove();
  return false;
});

but if you have:

<ul id="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<a href-"#" id="clear">Clear</a>

and you want to clear all of them then use empty():

$("#clear").click(function() {
  $("#list").empty();
  return false;
});