How to delete the first child of an element but referenced by $(this) in Jquery?

Question

The scenario is I have two divs: one is where I select items (divResults) and it goes to the next div (divSelectedContacts). When I select it I place a tick mark next to it. What I want to do is when I select it again I want to remove the tick mark and also remove the element from divSelectedContacts.

Here is the code:

$("#divResults li").click(function()
{
    if ($(this).find('span').size() == 1)
    {
        var copyElement = $(this).children().clone();
        $(this).children().prepend("<span class='ui-icon ui-icon-check checked' style='float:left'></span>");
        $("#divSelectedContacts").append(copyElement);
    } else
    {
        var deleteElement = $(this).find('span'); //here is the problem how to find the first span and delete it
        $(deleteElement).remove();
        var copyElement = $(this).children().clone();//get the child element
        $("#divSelectedContacts").find(copyElement).remove(); //remove that element by finding it
    }
});

I don't know how to select the first span in a li using $(this). Any help is much appreciated.

Answer 1

Several ways:

$(this).find('span:first');

$(this).find(':first-child');

$(this).find('span').eq(0);

Note that you don't need to use $(deleteElement) as deleteElement is already a jQuery object. So you can do it like this:

$(this).find('span:first').remove();

Answer 2

To get the first child of $(this) use this:

$(this).find(":first-child");

Answer 3

or you could just throw it all into the selector...

$('span:first', this);