removing appended items

I have in my form a listbox.

<span>
    <select size=5 id="submission_author_ids" name="submission[author_ids][]"  multiple onfocus="displayOptions();"> </select>
  </span>

I have a function which reads all options in the listbox and then appends it in a div.

function displayOptions(){

var list = document.getElementById('submission_author_ids');
//$j('#spanSubmitters').remove();
for(var i = 0; i < list.options.length; ++i)
$j('#spanSubmitters').append(list.options[i].text);

 }

The problem is that each time focus is brought on the listbox, the options are appended to the div. This can results in duplication. I would like to remove all appended options in the div first and append the options afresh each time the listbox receives focus.

I tried the code below but it's doesn't seem to be working --- options are no longer displayed

$j('#spanSubmitters').remove();

I 开发者_StackOverflow社区would be grateful if someone could help me out with this.

Cheers

Use empty(). remove() removes the whole element. empty() just removes all child nodes inside it.

$j('#spanSubmitters').empty();

Try this:

$j('#spanSubmitters').children().remove();