Remove LI from UL on click using jQuery

So I have a INPUT TEXT that upon keypress=enter prepends an LI to an UL

The LI contains a LINK that gives the user the option to remove it from the UL

HTML (on page load)

<开发者_运维百科;ul id="conditionList"></ul>

after ther user inputs some conditions, the UL gets populated with LI

<li>condition<a href="#" class="clearitem">x</a></li>

However, in my jQuery

$('#conditionList a.clearitem').click(function(){
$(this).parent().remove();
});

will not work!

Is it because it's not recognizing the new LI's?

Deprecated since 1.9. use on instead of live.

Use live() instead of click there because your link is generated dynamically:

$('#conditionList a.clearitem').live('click', function(){
  $(this).parent().remove();
});

.live()

Attach a handler to the event for all elements which match the current selector, now or in the future.

Depracate since 1.9. use on instead of live.

You need to use an event binding that's going to recognize created elements. This should do that:

$('#conditionList a.clearitem').live('click', function () {
  $(this).parent().remove();
});

Possibly the LIs are added to the DOM after the click event handler has been declared? If so, you might want to look into using live() instead of bind():

$('#conditionList a.clearitem').live('click', function(){
$(this).parent().remove();
});