Question

I would like to add an x button to every <li> I have in my <ul>. This x (close) button will delete that individual <li> from the <ul>. How do I do this using jQuery to create a single function that takes the this to delete the current item?

Heres my example HTML:

<ul id="list_a">
  <li value="1">Red&nbsp;&nbsp;<span class="closeButton">X</span></li>
  <li value="2">Orange&nbsp;&nbsp;<span class="closeButton">X</span></li>
  <li value="3">Green&nbsp;&nbsp;<span class="closeButton">X</span></li>
</ul>

edit: added close button <span>

Answer 1

Event delegation. Select the list, then ask it to listen to click events on the .closeButtons. Then remove the li or the parent of the span.

$("#list_a").delegate(".closeButton", "click", function() {
    $(this).parent().remove();
});