Q:

Remove sibling DIV then get text of parent element

This should be simple I'm sure but I keep getting it wrong.
The markup I have is as follows:
<li>
    <input type="checkbox" name="students" value="12345" />
    &nbsp;
    Student Name
    <div>
        [F:0|I:0]
    </div>
</li>

When a user clicks on the checkbox, I'd like to take some of the information from the LI and create a new, reformatted LI to append elsewhere.
$('input[name=students]').click(function() {
    var $ele = $(this).parent('li'); // there's my parent LI
    $ele.remove('div'); // get rid of the div within this LI
    var text = $ele.text(); // display the remaining text

    alert(text); // all the text, including the text from the div???
});

As you can see by the last line, I get all of the text (including the [F:0|I:0] etc, which I don't want). What am I doing wrong?
http://jsfiddle.net/nen7a/

A:

it should be
$ele.children('div').remove();

The .remove() removes the set of matched element from dom. You need to call the .remove() method on the set of elements which has to be removed - in this case the div element
Demo: Fiddle

