Question

Very new to jQuery, if dupe question sorry at this point not even sure I am using correct verbiage.

I need to add a li item to a ul based on a click event of a ListBox (user selects text and a new li is added with the selected text). And I need to add a icon, label and input on the li item. The icon needs to be a ‘remove’ icon.

How can I wire up the function to remove the newly added li item via jQuery?

Here is what I have tried;

        $(function() {
        function addSelectedWordCriteria() {
            var selectedWord = $("#wsWords").val();
            $("#wsCriteriaList").append("<li><a href='#' class='wsCriteriaRemove'><span class='ui-icon ui-icon-circle-close'/></a><em class='wsFilteredWord'>" + selectedWord + "</em><input type='textbox' maxlength='200' class='wsFilteredWords'/></li>");
            $("#wsCriteriaList a:last").bind("click", "removeSelectedWordCriteria");
        };

        function removeSelectedWordCriteria() {
            $("#wsCriteriaList").selected().remove();
        }

    })

<%= Html.ListBox("wsWords", ViewData["Words"] as IEnumerable<SelectListItem>) %>    

<ul id="wsCriteriaList">    
</ul>

Thanks for any suggestions.

Answer 1

To your immediate question, since the click event gives you a reference to the element that sent the event, you could use it quickly determine what should be removed:

    function removeSelectedWordCriteria() {
        $(this).parent().remove();
    }

Other things I may change about this code:

1. As ScottE pointed out, this could be a great place to use the new live function. Outside of your addSelectedWordCriteria method, you should be able to put in:

   $("#wsCriteriaList a").live("click", "removeSelectedWordCriteria");
   

   And that will register all of your a tags with the same event even as they get added.

2. Speaking of a tags, I’m not sure if you really need yours. All you really want is to be able to click the span that contains the remove image. Since you’re not actually using a link, personally, I would take out the anchor tag all together and put the click event directly on the span tag. You could then give it a class for the above live function.

Let me know if you have additional questions.